Descripción general del selector de tiempo de Angular

    El componente de selección de tiempo permite a los usuarios ingresar o seleccionar partes de tiempo de un objeto "Fecha" desde un menú desplegable o diálogo con controles giratorios, que luego se refleja en el campo de entrada. En el modo desplegable, que es el predeterminado, el campo de entrada es editable y los usuarios también pueden editar la hora seleccionada.

    El componente de selección de hora tiene diferentes plantillas integradas para mostrar un botón de reloj, así como funciones como validación, formato de hora personalizado y más.

    Angular Time Picker Example

    En general, los usuarios pueden introducir una hora preferida a través de la entrada de texto o eligiendo un valor de tiempo de un menú desplegable Selector de tiempo de Angular. El ejemplo básico de Angular Time Picker a continuación muestra cómo los usuarios pueden ingresar fácilmente el valor con la ayuda del menú desplegable o mediante el teclado.

    Getting Started with Ignite UI for Angular Time Picker

    Para empezar a utilizar el componente Ignite UI for Angular Time Picker, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importarlosIgxTimePickerModule en tu archivo app.module.ts.

    Note

    IgxTimePicker también depende de BrowserAnimationsModule y, opcionalmente, de HammerModule para las interacciones táctiles. También deben agregarse al AppModule.

    // app.module.ts

...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule } from 'igniteui-angular';
// import { IgxTimePickerModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxTimePickerModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importarlosIgxTimePickerComponent como una dependencia independiente, o usar elIGX_TIME_PICKER_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_TIME_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-time-picker [(ngModel)]="time"></igx-time-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TIME_PICKER_DIRECTIVES, FormsModule]
    /* or imports: [IgxTimePickerComponent, FormsModule] */
})
export class HomeComponent {
    public time: Date;
}

    Ahora que tienes importado el módulo o las directivas Ignite UI for Angular Time Selecter, puedes empezar a usar eligx-time-picker componente.

    Using the Angular Time Picker

    Default

    Para agregar el selector de hora en una plantilla, use el siguiente código:

    <!--meeting.component.html-->
<igx-time-picker></igx-time-picker>

    El resultado debe ser el mismo que el de la demostración.

    Binding

    El Selector de Tiempo en Angular puede vincularse a un objeto Date o a un valor de cadena solo de tiempo enISO 8601 formato estableciendo lavalue propiedad ongModel.

    Primero crea una cadena de tiempo enISO 8601 formato:

    public time = '09:15:30';

    Luego utiliza elngModel para crear un enlace de datos bidireccional:

    <igx-time-picker [(ngModel)]="time"></igx-time-picker>

    o establecervalue la entrada en la plantilla:

    <igx-time-picker [value]="time"></igx-time-picker>

    Para usarlo en forma reactiva necesitas poner unaformControlName a en el selector

    <form [formGroup]="form">
    <igx-time-picker formControlName="timePicker"></igx-time-picker>
</form>

    export class SampleFormComponent {
    // ...
    public form: FormGroup;
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            timePicker: ['', Validators.required]
        });
    }
}

    Projecting components

    El componente selector de tiempo permite proyectar componentes hijos, igual que en elIgxInputGroupComponent:igxLabel,IgxHint,igxPrefix,igxSuffix, excluyendoIgxInput. Información más detallada sobre esto se puede encontrar en el tema Etiquetas y Entradas.

    En la configuración predeterminada, un icono desplegable o de diálogo para alternar se muestra como prefijo. Puede cambiarse o redefinirse usando elIgxPickerToggleComponent componente. Puede decorarse con cualquieraigxPrefix de las dosigxSuffix, que definirán su posición: al inicio de la entrada o al final, respectivamente.

    En el siguiente ejemplo, agregamos una etiqueta y una sugerencia personalizadas y cambiamos la posición predeterminada del ícono de alternancia para que se muestre como un sufijo:

    <igx-time-picker [(ngModel)]="date" mode="dialog" [inputFormat]="'hh:mm'">
    <label igxLabel>Home Time </label>
    <igx-picker-toggle igxSuffix>
        <igx-icon>home</igx-icon>
    </igx-picker-toggle>
    <igx-hint>{{date.toLocaleString()}}</igx-hint>
</igx-time-picker>

    public date: Date = new Date();

    Y aquí está nuestra plantilla Ignite UI for Angular Time Picker:

    Custom action buttons

    PermiteIgxTimePickerComponent la personalización de botones de acción. Para lograrlo, envuelve los botonesng-template marcados con eligxPickerActions selector de directivas.

    En el siguiente ejemplo, se agregan botones de acción personalizados para las acciones "CANCELAR", "HECHO" y "AHORA".

    <!-- sample.component.html -->

<igx-time-picker #picker format="hh:mm" mode="dropdown">
    <ng-template igxTimePickerActions>
        <div class="container action-buttons">
            <button igxButton="flat" (click)="picker.cancelButtonClick()">cancel</button>
            <button igxButton="flat" (click)="picker.okButtonClick()">done</button>
            <button igxButton="flat" (click)="selectNow(picker)">now</button>
        </div>
    </ng-template>
</igx-time-picker>

    // sample.component.ts
...
public selectNow(timePicker: IgxTimePickerComponent) {
    timePicker.value = new Date();
    timePicker.close();
}
...

    Y ahí lo tenemos, un selector de tiempo rediseñado con menú desplegable, acciones personalizadas y soporte de enlace bidireccional:

    Customizing the toggle and clear icons

    SeIgxTimePickerComponent pueden configurar conIgxPickerToggleComponent yIgxPickerClearComponent estos pueden usarse para cambiar los iconos de toggle y clear sin tener que añadir tus propios handlers de clics.

     <igx-time-picker>
    <label igxLabel>Select time</label>
    <igx-picker-toggle igxPrefix>
        <igx-icon>snooze</igx-icon>
    </igx-picker-toggle>
    <igx-picker-clear igxSuffix>
        <igx-icon>delete</igx-icon>
    </igx-picker-clear>
</igx-time-picker>

    Keyboard Navigation

    • Los usuarios pueden navegar por las partes de tiempo del componente mediante el teclado Up y Down las flechas o desplazarse por el campo de entrada y en el desplegable/diálogo. La navegación en la entrada es posible independientemente delminValue omaxValue, mientras que la navegación en el desplegable/diálogo estará restringida dentro delminValue rango ymaxValue.
    • El menú desplegable del selector de tiempo se puede abrir haciendo clic en el ícono de alternancia, presionando la tecla Espacio o presionando las teclas Alt + Abajo. En el modo de diálogo, esto se puede hacer haciendo clic en la entrada.
    • Al presionar la tecla Intro o hacer clic con el mouse fuera del menú desplegable/diálogo se aplica la selección y se cierra el menú desplegable/diálogo.
    • Al presionar la tecla Escape se cancela la selección y se cierra el menú desplegable/diálogo.
    • Cuando ingrese un nuevo valor mientras el menú desplegable está cerrado, haga clic fuera del selector de tiempo o presione Tab para mover el foco para que se acepte el valor.

    Examples

    Dialog Mode

    El modo predeterminado de selector de tiempo es el desplegable editable. Para cambiar el modo selector de tiempo a modo diálogo de solo lectura, configura lamode entrada a:dialog​

    // timePickerDropdown.component.ts

import { PickerInteractionMode } from 'igniteui-angular';
// import { PickerInteractionMode } from '@infragistics/igniteui-angular'; for licensed package
...
public mode = PickerInteractionMode.Dialog;

    <!--timePickerDropdown.component.html-->
<igx-time-picker [mode]="mode"></igx-time-picker>

    O simplemente cambia elmode lector de tiempo así:

    <!--timePickerDropdown.component.html-->
<igx-time-picker mode="dialog"></igx-time-picker>

    En modo diálogo, la cabecera del diálogo muestra la hora seleccionada actualmente en el selectorinput format. Puedes cambiar la posición del encabezado configurando laheaderOrientation propiedad.

    Cuando losminValue ymaxValue están activados, el diálogo muestra el tiempo dentro de ese rango únicamente. Consulta el ejemplo del valor mínimo máximo más abajo para más detalles.

    Display and input format

    El componente selector de hora admite diferentes formatos de visualización y entrada.

    El formato de visualización es el formato del valor cuando está en modo edición y puede ser uno de los formatos listados Angular DatePipe. Esto le permite soportar opciones de formato predefinidas, comoshortTime ylongTime.

    El formato de entrada es el formato del valor cuando no está en modo de edición y el formato, en el que las porciones de tiempo se muestran en el desplegable/diálogo. LainputFormat propiedad acepta una cadena de formato construida usando caracteres soportados por el DatePipe, por ejemplohh:mm:ss, pero no admite opciones de formato predefinidas, comoshortTime ylongTime. Si lainputFormat propiedad no está definida, por defecto pasa ahh:mm tt. Alternativamente, si lainputFormat propiedad no está establecida, el formato de entrada se infierirá de eldisplayFormat en caso de que pueda analizarse como conteniendo solo partes numéricas de fecha-hora.

    <igx-time-picker
    [(ngModel)]="time"
    [inputFormat]="`hh:mm:ss`"
    [displayFormat]="`shortTime`">
</igx-time-picker>
    Note

    AhoraIgxTimePicker soporta entrada IME. Cuando termina la composición, el control convierte los números de carácter ancho en caracteres ASCII.

    Increment and decrement

    El selector de tiempo expone los métodos públicosincrement ydecrement los que aceptan dos parámetros opcionales: elDatePart que se modificará y eldelta por el cual se modificará. Si no se especifican, losDatePart valores predeterminados yHours losdelta valores predeterminados deitemsDelta.

    Puede encontrar un ejemplo que ilustra el uso de ambos métodos en Directiva del editor de fecha y hora.

    Forms and Validation

    El componente selector de tiempo admite todas las directivas del núcleo FormsModule NgModel y ReactiveFormsModule (FormControl, FormGroup, etc.). Esto también incluye las funciones de Validadores de formularios. Además, los valores mínimo y máximo del componente también actúan como validadores de formulario.

    El ejemplo de integración de Reactive Forms demuestra cómo utilizar igxTimePicker en Reactive Forms.

    Valor mínimo máximo

    Puedes especificarminValue ymaxValue restringir la entrada del usuario, en cuyo caso el desplegable/diálogo mostrará solo el tiempo dentro de ese rango. Sin embargo, en el modo desplegable, todavía es posible que el usuario escriba una hora inválida. Puedes gestionar elvalidationFailed evento para notificar al usuario si eso ocurre.

    Note

    Los valores mínimos/máximos deben ser un objeto Date o una cadena solo de tiempo en elISO 8601 formato:

    // app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule, IgxToastModule } from 'igniteui-angular';
// import { IgxTimePickerModule, IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, IgxTimePickerModule, IgxToastModule],
    ...
})
export class AppModule {}

// app.component.ts

public time = '10:00:00';
public min = '09:15:30';
public max = '18:15:30';

@ViewChild('toast', { static: true })
private toast;

public onValidationFailed() {
    this.toast.open();
}

    <igx-time-picker
 [(ngModel)]="time"
    [itemsDelta]="{hours:2, minutes:5}"
    [inputFormat]="'hh:mm:ss tt'"
    [headerOrientation]="true"
    [minValue]="min"
    [maxValue]="max"
 (onValidationFailed)="onValidationFailed()">
 <label igxLabel>Meeting Start</label>
</igx-time-picker>

<igx-toast #toast message="Value must be between 09:15:30 AM and 06:15:30 PM"></igx-toast>

    El menú desplegable muestra valores dentro del rango mínimo/máximo (09:15:30 a.m. ~ 06:15:30 p.m.) según el delta de elementos. Se agrega un brindis para mostrar un mensaje cuando se ingresa una hora no válida.

    Note

    Los valores mostrados para cada porción temporal en el desplegable/diálogo se calculan en función de que el delta de elementos siempre empieza desde cero. Si yminValue​maxValue no coincide con el delta de elementos, los valores mostrados comenzarán o terminarán desde el siguiente/último valor posible que coincida con el umbral.

    Y ahí lo tenemos:

    Usando el selector de fecha y hora juntos

    En algunos casos, cuando losIgxDatePicker y el IgxTimePicker se usan juntos, puede que necesitemos que estén vinculados a un mismo valor de objeto Fecha.

    Para lograr eso en formularios basados en plantillas, utiliza elngModel para vincular ambos componentes al mismo objeto Fecha.

    En formas reactivas, podemos manejar elvalueChange evento de cada componente y actualizar el valor del otro.

    Estilismo

    Para empezar a estilizar el selector de tiempo, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mixin:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende ytime-picker-theme acepta parámetros que estilizan el selector de tiempo.

    $my-time-picker-theme: time-picker-theme(
  $text-color: #e4c8a5,
  $hover-text-color: #ecaa53,
  $selected-text-color: #ecaa53,
  $header-background: #ecaa53,
  $background-color: #011627
);
    Note

    Para poder estilizar cualquier componente adicional que se use como parte del contenido de la ventana del selector de tiempo (como elIgxButton), debe crearse un tema adicional específico para el componente respectivo y que se coloque únicamente dentro del ámbito de la ventana de diálogo (para que no afecte al resto de la aplicación).

    Como la ventana del selector de tiempo utiliza elIgxOverlayService estilo para que nuestro tema personalizado llegue a la ventana del selector de tiempo que queremos estilizar, proporcionaremos una salida específica donde la ventana de diálogo se colocará en el DOM cuando sea visible.

    Los elementos en nuestro selector de tiempo no son descendientes de nuestro componentehost; actualmente se muestran en la toma de superposición predeterminada, al final deldocument cuerpo. Cambiar esto se hace utilizando laoutlet propiedad en eloverlaySettings. Losoutlet controles donde debe renderizarse el contenedor de superposición.

    Aquí, podemos pasar una referencia al elemento donde nos gustaría que esté nuestro contenedor:

    <igx-time-picker #picker [overlaySettings]="{ outlet: element }">
</igx-time-picker>

    export class TimepickerStylingComponent {
    constructor(public element: ElementRef) {
    }
}

    Ahora, los elementos del selector de tiempo se representan correctamente dentro del host de nuestro componente, lo que significa que nuestro tema personalizado entrará en vigor:

    Note

    Para aprender más sobre las distintas opciones para proporcionar temas a los elementos que se muestran usando elIgxOverlayService, puedes echar un vistazo al tema de estilismo Overlay.

     @include css-vars($my-time-picker-theme);
    Warning

    Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación utilice::ng-deep

    :host {
  ::ng-deep {
    @include css-vars($my-time-picker-theme);
  }
}

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.