Angular Date Picker Component Overview

Angular Date Picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up. Lightweight and simple to use, the Date Picker in Angular lets users to navigate to a desired date with several view options – month, year, decade. There are the usual min, max, and required properties to add validation.

The Ignite UI for Angular Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The Angular Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration.

Angular Date Picker Example

Below you can see a sample that demonstrates how the Angular Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it.

Getting Started with Ignite UI for Angular Date Picker

To get started with the Ignite UI for Angular Date Picker component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

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

Now that you have the Ignite UI for Angular Date Picker module or directives imported, you can start using the igx-date-picker component.

Using the Angular Date Picker Component

Display Date picker

To instantiate a Date Picker in its default dropdown state, use the following code:

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

A good thing to note is that the the Angular Date Picker Component in Ignite UI will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.

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.

Here is how an Angular Date Picker with Japanese locale definition would look like:

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

The Angular Date Picker uses the calendar's theme, so we have to create a new theme that extends the calendar-theme and use some of its parameters to style the date picker's items:

$custom-datepicker-theme: calendar-theme(
  $header-background: #345779,
  $content-background: #fdfdfd,
  $header-foreground: #ffffff,
  $date-current-foreground: #2dabe8,
  $navigation-color: #2dabe8,
  $date-selected-foreground: #fdfdfd,
  $date-current-background: #fdfdfd,
  $navigation-hover-color: #345779,
  $ym-current-foreground: #2dabe8,
  $ym-hover-foreground: #2dabe8,
  $picker-foreground: #2dabe8,
  $picker-hover-foreground: #345779,
);

The last step is to pass the custom Date Picker theme:

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

Warning

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::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 angulares
• Ignite UI for Angular GitHub