Descripción general del selector de tiempo 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 ingresar una hora preferida ya sea mediante la entrada de texto o eligiendo un valor de hora en el menú desplegable del Selector de hora Angular. El ejemplo básico Angular Time Picker a continuación muestra cómo los usuarios pueden ingresar fácilmente el valor con la ayuda del menú desplegable o usando el teclado.

Getting Started with Ignite UI for Angular Time Picker

Para comenzar con 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 a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxTimePickerModule en su 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, a partir de 16.0.0, puede importar IgxTimePickerComponent como una dependencia independiente o usar el token IGX_TIME_PICKER_DIRECTIVES 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 ha importado la Ignite UI for Angular, puede comenzar a usar el componente igx-time-picker.

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 se puede vincular a un objeto de fecha o a un valor de cadena de solo tiempo en formato ISO 8601 estableciendo la propiedad value o ngModel.

Primero cree una cadena de tiempo en formato ISO 8601:

public time = '09:15:30';

Luego use ngModel para crear un enlace de datos bidireccional:

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

o establecer la entrada value en la plantilla:

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

Para usarlo en forma reactiva, debe establecer un formControlName 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 secundarios, igual que en IgxInputGroupComponent: igxLabel, IgxHint, igxPrefix, igxSuffix, excluyendo IgxInput. Puede encontrar información más detallada sobre esto en el tema Etiqueta y entrada.

En la configuración predeterminada, se muestra un icono de alternancia de menú desplegable/diálogo como prefijo. Se puede cambiar o redefinir utilizando el componente IgxPickerToggleComponent. Se puede decorar con igxPrefix o igxSuffix, 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 Ignite UI for Angular Time Picker:

Custom action buttons

IgxTimePickerComponent admite la personalización del botón de acción. Para lograrlo, ajuste los botones en ng-template marcados con el selector de directiva igxPickerActions.

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

IgxTimePickerComponent se puede configurar con IgxPickerToggleComponent e IgxPickerClearComponent, estos se pueden usar para cambiar los íconos de alternar y borrar sin tener que agregar sus propios controladores de clic.

 <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>

Los usuarios pueden navegar por las partes de tiempo del componente mediante las teclas de flecha hacia arriba y hacia abajo del teclado o desplazándose en el campo de entrada y en el menú desplegable/diálogo. La navegación en la entrada es posible independientemente de minValue o maxValue, mientras que la navegación en el menú desplegable/diálogo estará restringida dentro del rango minValue y maxValue.
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 de selección de hora predeterminado es el modo desplegable editable. Para cambiar el modo del selector de hora al modo de diálogo de solo lectura, configure la entrada del mode en 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 cambie el mode en el selector de tiempo de esta manera:

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

En el modo de diálogo, el encabezado del diálogo muestra la hora seleccionada actualmente en el input format del selector. Puede cambiar la posición del encabezado configurando la propiedad headerOrientation.

Cuando se configuran minValue y maxValue el cuadro de diálogo muestra el tiempo dentro de ese rango únicamente. Consulte el ejemplo de valor mínimo máximo a continuación para obtener 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 de edición y puede ser uno de los formatos Angular DatePipe enumerados. Esto le permite admitir opciones de formato predefinidas, como shortTime y longTime.

El formato de entrada es el formato del valor cuando no está en modo de edición y el formato en el que se muestran las partes de tiempo en el menú desplegable/diálogo. La propiedad inputFormat acepta una cadena de formato construida utilizando caracteres admitidos por DatePipe, por ejemplo hh:mm:ss, pero no admite opciones de formato predefinidas, como shortTime y longTime. Si la propiedad inputFormat no está definida, su valor predeterminado es hh:mm tt.

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

Note

IgxTimePicker ahora admite la entrada de IME. Cuando finaliza la composición, el control convierte los números de caracteres anchos a caracteres ASCII.

Increment and decrement

El selector de tiempo expone métodos públicos increment y decrement, que aceptan dos parámetros opcionales: el DatePart que se modificará y el delta por el cual se cambiará. Si no se especifica, DatePart tiene como valor predeterminado Hours y el delta tiene como valor predeterminado itemsDelta.

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

Puede especificar minValue y maxValue para restringir la entrada del usuario, en cuyo caso el menú desplegable/diálogo mostrará el tiempo dentro de ese rango únicamente. Sin embargo, en el modo desplegable, aún es posible que el usuario escriba una hora no válida. Puede manejar el evento validationFailed para notificar al usuario si eso sucede.

Note

Los valores mínimo/máximo deben ser un objeto de fecha o una cadena de solo hora en el formato ISO 8601:

// 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 de tiempo en el menú desplegable/diálogo se calculan en función del delta de elementos, siempre comenzando desde cero. Si minValue y maxValue no coinciden con el delta de elementos, los valores mostrados comenzarán/finalizará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 IgxDatePicker e IgxTimePicker se usan juntos, es posible que necesitemos vincularlos al mismo valor de objeto Date.

Para lograr eso en formularios basados en plantillas, use ngModel para vincular ambos componentes al mismo objeto Date.

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

Estilismo

Para comenzar a diseñar el selector de tiempo, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@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 simple, creamos un nuevo tema que extiende el time-picker-theme y acepta parámetros que le dan estilo al selector de tiempo.

$my-time-picker-theme: time-picker-theme(
  $text-color: #E4C8A5,
  $hover-text-color: #ECAA53,
  $selected-text-color: #ECAA53,
  $header-background: #ECAA53,
  $header-hour-text-color: #011627,
  $header-time-period-color: #011627,
  $background-color: #011627
);

Note

Para aplicar estilo a cualquier componente adicional que se utilice como parte del contenido de la ventana del selector de tiempo (como IgxButton), se debe crear un tema adicional que sea específico para el componente respectivo y se coloque solo bajo el alcance de la ventana de diálogo (para que no afecta al resto de la aplicación).

Dado que la ventana del selector de tiempo utiliza IgxOverlayService, para que nuestro tema personalizado llegue a la ventana del selector de tiempo que queremos diseñar, proporcionaremos una salida específica donde se colocará la ventana de diálogo en el DOM cuando esté visible.

Los elementos de nuestro selector de tiempo no son descendientes de nuestro host de componentes; actualmente se muestran en la salida superpuesta predeterminada, al final del cuerpo del document. Cambiar esto se realiza haciendo uso de la propiedad outlet en overlaySettings. La outlet controla dónde se debe representar el contenedor superpuesto.

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 obtener más información sobre las diversas opciones para proporcionar temas a los elementos que se muestran mediante IgxOverlayService, puede consultar el tema Estilo de superposición.

Including Themes

El último paso es incluir el tema del componente en nuestra aplicación.

Si $legacy-support está configurado en true, incluya el tema así:

 @include time-picker($my-time-picker-theme);

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

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

Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

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

Note

Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

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

Descripción general del selector de tiempo Angular

Angular Time Picker Example

Getting Started with Ignite UI for Angular Time Picker

Note

Using the Angular Time Picker

Default

Binding

Projecting components

Custom action buttons

Customizing the toggle and clear icons

Keyboard Navigation

Examples

Dialog Mode

Display and input format

Note

Increment and decrement

Forms and Validation

Valor mínimo máximo

Note

Note

Usando el selector de fecha y hora juntos

Estilismo

Note

Note

Including Themes

Note

Note

Demo

API References

Theming Dependencies

Additional Resources

Tematización