Descripción general del componente del selector de fecha de Angular

Angular selector de fecha es un componente rico en funciones que se utiliza para introducir una fecha mediante la entrada manual de texto o elegir valores de fecha en un cuadro de diálogo de calendario que aparece. Ligero y fácil de usar, el selector de fecha en Angular permite a los usuarios navegar a una fecha deseada con varias opciones de visualización: mes, año, década. Existen las propiedades mínimas, máximas y obligatorias habituales para agregar validación.

El componente Selector de fecha Ignite UI for Angular permite a los usuarios elegir una sola fecha a través de un menú desplegable de calendario de vista mensual o un campo de entrada editable. El selector de fecha de Angular también admite un modo de cuadro de diálogo para la selección solo del calendario, el formato de fecha personalizable y la configuración regional y la integración de validación.

Angular Date Picker Example

A continuación, puede ver un ejemplo que demuestra cómo funciona el selector de fecha Angular cuando los usuarios pueden elegir una fecha a través de una entrada de texto manual y hacer clic en el icono del calendario a la izquierda para navegar hasta él. Vea cómo renderizarlo.

Getting Started with Ignite UI for Angular Date Picker

Para empezar a utilizar el componente Selector de fecha Ignite UI for Angular, 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 importar IgxDatePickerModule en su archivo app.module.ts.

Note

Como el selector usa IgxCalendarComponent, también depende de BrowserAnimationsModule y, opcionalmente, de HammerModule para las interacciones táctiles, por lo que también deben agregarse al módulo:

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

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

Alternativamente, a partir de 16.0.0, puede importar IgxDatePickerComponent como una dependencia independiente o usar el token IGX_DATE_PICKER_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
    <igx-date-picker>
        <label igxLabel>Date</label>
    </igx-date-picker>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */
})
export class HomeComponent {}

Ahora que tiene el módulo o las directivas del selector de fecha Ignite UI for Angular importado, puede comenzar a usar el igx-date-picker componente.

Using the Angular Date Picker Component

Display Date picker

Para crear una instancia de un selector de fecha en su estado predeterminado dropdown, use el código siguiente:

<igx-date-picker>
    <label igxLabel>Date</label>
</igx-date-picker>

Options

El IgxDatePickerComponent se puede vincular a una date o una string.

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

public date = new Date(2000, 0, 1);

Si una cadena está vinculada al selector, debe ser una cadena de solo fecha en el formato ISO 8601:

<igx-date-picker [value]="'2000-01-01'"></igx-date-picker>

Puede encontrar más información sobre esto en la sección ISO del Editor DateTime.

El enlace bidireccional es posible a través de ngModel:

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

Así como a través de la entrada value:

<igx-date-picker [(value)]="date"></igx-date-picker>

Además, formControlName se puede configurar en el selector para usarlo en forma reactiva:

<form [formGroup]="form">
    <igx-date-picker formControlName="datePicker"></igx-date-picker>
</form>

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

Note

El selector siempre devuelve un valor Date, esto significa que si está vinculado por modelo o en dos direcciones a una variable de cadena, después de que se haya elegido una nueva fecha, será de tipo Date.

Projecting components

​IgxDatePickerComponent permite la proyección de componentes secundarios que admite IgxInputGroupComponent (con la excepción de IgxInput): igxLabel, igx-hint / IgxHint, igx-prefix / igxPrefix, igx-suffix / igxSuffix. Puede encontrar información más detallada sobre esto en el tema Etiqueta y entrada.

<igx-date-picker #datePicker>
    <igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon>
</igx-date-picker>

El fragmento anterior agregará un icono de alternancia adicional al final de la entrada, justo después del icono de borrado predeterminado. Sin embargo, esto no eliminará el icono de alternancia predeterminado, ya que los prefijos y sufijos se pueden apilar uno tras otro.

Personalización de los iconos de alternar y borrar

Se IgxDatePickerComponent puede configurar con IgxPickerToggleComponent y IgxPickerClearComponent. Estos se pueden usar para cambiar los íconos de alternancia y borrar sin tener que agregar sus propios controladores de clics.

 <igx-date-picker>
    <label igxLabel>Select a Date</label>
    <igx-picker-toggle igxPrefix>
        <igx-icon>calendar_view_day</igx-icon>
    </igx-picker-toggle>
    <igx-picker-clear igxSuffix>
        <igx-icon>delete</igx-icon>
    </igx-picker-clear>
</igx-date-picker>

Botones de acción personalizados

Los botones de acción del selector se pueden modificar de dos maneras:

• El texto del botón se puede cambiar usando las propiedades de todayButtonLabel entrada y las cancelButtonLabel siguientes:

<igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>

• Se pueden crear plantillas para todos los botones usando la directiva igxPickerActions: con ella obtienes acceso al calendar del selector de fechas y a todos sus miembros:

<igx-date-picker>
    <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
    </ng-template>
</igx-date-picker>

Keyboard Navigation

Abrir y cerrar la interfaz de usuario del calendario de IgxDatePickerComponent con el teclado está disponible solo para el modo dropdown y se puede activar mediante las siguientes combinaciones de teclas:

Llaves	Descripción
Espacio	Muestra la ventana emergente del calendario y la enfoca.
Alt + ↓	Muestra la ventana emergente del calendario y la enfoca.
Esc	Cierra la ventana emergente del calendario y enfoca el campo de entrada.
Ingresar	Cierra la ventana emergente del calendario, selecciona la fecha enfocada y mueve el foco al campo de entrada
Alt + ↑	Cierra la ventana emergente del calendario y enfoca el campo de entrada.

Dado que IgxDatePickerComponent usa IgxDateTimeEditorDirective, hereda su navegación por teclado.

Examples

Dialog Mode

El IgxDatePickerComponent también admite un modo dialog:

<igx-date-picker [mode]="'dialog'"></igx-date-picker>

Display and input format

inputFormat y displayFormat son propiedades que se pueden configurar para que el editor del selector siga un formato específico. La propiedad inputFormat se utiliza cuando el selector está en modo dropdown y controla la máscara editable de la entrada, así como su marcador de posición (si no hay ninguno configurado). Además, inputFormat se basa en la configuración regional, por lo que si no se proporciona ninguno, el selector utilizará de forma predeterminada el utilizado por el navegador.

Una buena cosa a tener en cuenta es que el componente de selector de fecha Angular en Ignite UI siempre agregará un cero a la izquierda en las date partes y month si se proporcionaron en un formato que no lo tiene, por ejemplo d/M/yy, se convierte dd/MM/yy. Esto solo se aplica durante la edición.

displayFormat Por otro lado, utiliza Angular y DatePipe se utiliza para formatear la entrada del selector cuando no está enfocado. Si no se proporciona ninguno displayFormat, el selector usará el inputFormat as its displayFormat. 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.

Puede encontrar más información sobre estos en la sección de ejemplos IgxDateTimeEditor.

Note

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

​IgxDatePickerComponent expone métodos increment y decrement. Ambos provienen de IgxDateTimeEditorDirective y se pueden usar para incrementar y disminuir una DatePart específica de la fecha establecida actualmente.

<igx-date-picker #datePicker>
    <igx-icon igxPrefix (click)="datePicker.increment(DatePart.Month, 3)">keyboard_arrow_up</igx-icon>
    <igx-icon igxPrefix (click)="datePicker.decrement(DatePart.Year. 4)">keyboard_arrow_down</igx-icon>
</igx-date-picker>

También tiene una propiedad de entrada spinDelta que se puede usar para incrementar o disminuir una parte de fecha específica de la fecha establecida actualmente.

<igx-date-picker [spinDelta]="{date: 2, month: 3, year: 4}"></igx-date-picker>

In Angular Forms

​IgxDatePickerComponent 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, las propiedades minValue y maxValue del componente actúan como validadores de formulario.

Puede ver el IgxDatePickerComponent en forma reactiva visitando nuestro tema Integración de formas reactivas.

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.

Calendar Specific settings

​IgxDatePickerComponent utiliza IgxCalendarComponent y puede modificar algunas de sus configuraciones a través de las propiedades que expone el selector de fecha. Algunos de estos incluyen displayMonthsCount, que permite mostrar más de un calendario cuando se expande el selector, weekStart, que determina el día de inicio de la semana, showWeekNumbers, que muestra el número de cada semana del año y más.

Internationalization

La localización de IgxDatePickerComponent se puede controlar a través de su entrada locale. Además, utilizando las plantillas igxCalendarHeader e igxCalendarSubheader, proporcionadas por IgxCalendarComponent, puede especificar el aspecto de su encabezado y subencabezado. Puede encontrar más información sobre cómo utilizar estas plantillas en el tema IgxCalendarComponent.

Así es como se vería un selector de fecha Angular con una definición de configuración regional japonesa:

<igx-date-picker locale="ja-JP" [value]="date">
  <ng-template igxCalendarHeader let-format>
    {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }}
  </ng-template>
  <ng-template igxCalendarSubheader let-format>
    <span (click)="format.yearView()">{{ format.year.combined }}</span>
    <span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
  </ng-template>
</igx-date-picker>

Estilismo

Para comenzar a diseñar el selector de fechas, 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';

El selector de fechas Angular utiliza el tema del calendario, por lo que tenemos que crear un nuevo tema que amplíe el calendar-theme. Al establecer el $header-background, el tema calcula automáticamente los colores necesarios para las otras propiedades para garantizar un diseño visualmente equilibrado y accesible.

$custom-datepicker-theme: calendar-theme(
  $header-background: #57a5cd,
);

El último paso es pasar el tema personalizado del selector de fechas:

@include css-vars($custom-datepicker-theme);

Warning

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

:host {
  ::ng-deep {
    @include css-vars($custom-datepicker-theme);
  }
}

API References

• Componente IgxDatePicker
• Directiva IgxDateTimeEditor
• Componente IgxCalendar
• Estilos de componentes IgxCalendar
• Estilos de superposición Igx
• Componente IgxInputGroup

Theming Dependencies

• Tema IgxCalendario
• Tema IgxOverlay
• Tema IgxIcon
• Tema IgxButton
• Tema IgxInputGroup
• Tema desplegable Igx

Additional Resources

• Selector de tiempo
• Editor de fecha y hora
• Selector de intervalo de fechas
• Integración de formularios reactivos

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub