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.

    Ejemplo de selector de tiempo Angular

    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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Introducción a 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
    cmd

    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.

    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 {}
    typescript

    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;
    }
    typescript

    Ahora que ha importado la Ignite UI for Angular, puede comenzar a usar el componente igx-time-picker.

    Usando el selector de tiempo Angular

    Por defecto

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

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

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

    Vinculante

    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';
    typescript

    Luego use ngModel para crear un enlace de datos bidireccional:

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

    o establecer la entrada value en la plantilla:

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

    Para usarlo en forma reactiva, debe establecer un formControlName en el selector.

    <form [formGroup]="form">
        <igx-time-picker formControlName="timePicker"></igx-time-picker>
    </form>
    html
    export class SampleFormComponent {
        // ...
        public form: FormGroup;
        constructor(private fb: FormBuilder) {
            this.form = this.fb.group({
                timePicker: ['', Validators.required]
            });
        }
    }
    typescript

    Componentes proyectantes

    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>
    html
    public date: Date = new Date();
    typescript

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Botones de acción personalizados

    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>
    html
    // sample.component.ts
    ...
    public selectNow(timePicker: IgxTimePickerComponent) {
        timePicker.value = new Date();
        timePicker.close();
    }
    ...
    typescript

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | Banner de llamada a la acción

    Personalización de los iconos de alternar y borrar

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

    Navegación por teclado

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

    Ejemplos

    Modo de diálogo

    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;
    typescript
    <!--timePickerDropdown.component.html-->
    <igx-time-picker [mode]="mode"></igx-time-picker>
    html

    o simplemente cambie el mode en el selector de tiempo de esta manera:

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

    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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    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.

    Formato de visualización y entrada

    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 porciones de tiempo en el menú desplegable/cuadro de diálogo. La inputFormat propiedad acepta una cadena de formato construido mediante caracteres admitidos por DatePipe, por ejemplo hh:mm:ss, pero no admite opciones de formato predefinidas, como shortTime y longTime. Si la inputFormat propiedad no está definida, el valor predeterminado es hh:mm tt. Alternativamente, si no se establece la inputFormat propiedad, el formato de entrada se inferirá de la displayFormat en caso de que se pueda analizar como si solo contuviera partes numéricas de fecha y hora.

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

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

    Incremento y decremento

    El selector de tiempo expone métodos y públicos increment​ ​decrement, que aceptan dos parámetros opcionales: el DatePart que se va a modificar y el delta que lo cambiará. Si no se especifica, los DatePart valores predeterminados son y Hours los delta valores predeterminados a itemsDelta.

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

    Formularios y Validación

    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.

    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();
    }
    typescript
    <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>
    
    html

    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.

    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:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    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.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Estilo

    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';
    scss

    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
    );
    scss

    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>
    html
    export class TimepickerStylingComponent {
        constructor(public element: ElementRef) {
        }
    }
    typescript

    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:

    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.

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

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

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

    Manifestación

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Referencias de API

    Dependencias temáticas

    Recursos adicionales

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