Descripción general del componente Angular Datepicker

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

    La Ignite UI for Angular DatePicker permite a los usuarios elegir una fecha única a través de un menú desplegable de calendario con vista mensual o un campo de entrada editable. Angular DatePicker también admite un modo de diálogo para la selección solo desde el calendario, formato de fecha personalizable y con reconocimiento regional e integración de validación.

    Angular Datepicker Example

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

    Getting Started with Ignite UI for Angular Datepicker

    Para comenzar con el componente Ignite UI for Angular Datepicker, 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 IgxDatePickerModule en su archivo app.module.ts.

    Note

    Como el selector usa IgxCalendarComponent, también depende de BrowserAnimationsModule y 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 ha importado la Ignite UI for Angular Datepicker, puede comenzar a usar el componente igx-date-picker.

    Using the Angular Datepicker Component

    Display Datepicker

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

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

    <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 Angular DatePicker en Ignite UI siempre agregará un cero a la izquierda en el date y month porciones si se proporcionaron en un formato que no lo tenga, por ejemplo d/M/yy se convierte dd/MM/yy. Esto se aplica sólo durante la edición.

    displayFormat por otro lado, usa DatePipe de Angular y se usa para formatear la entrada del selector cuando no está enfocado. Si no se proporciona displayFormat, el selector utilizará inputFormat como displayFormat.

    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 Angular DatePicker con definició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';

    Angular DatePicker usa el tema del calendario, por lo que tenemos que crear un nuevo tema que extienda el calendar-theme y use algunos de sus parámetros para diseñar los elementos del selector de fecha:

    $custom-datepicker-theme: calendar-theme(
    $header-background: #345779,
    $content-background: #fdfdfd,
    $header-text-color: #ffffff,
    $date-current-text-color: #2dabe8,
    $picker-arrow-color: #2dabe8,
    $date-selected-text-color: #fdfdfd,
    $date-current-bg-color: #fdfdfd,
    $picker-arrow-hover-color: #345779,
    $year-current-text-color: #2dabe8,
    $year-hover-text-color: #2dabe8,
    $month-current-text-color: #2dabe8,
    $month-hover-text-color: #2dabe8,
    $picker-text-color: #2dabe8,
    $picker-text-hover-color: #345779,
);

    Using CSS variables

    El último paso es pasar el tema personalizado Angular DatePicker:

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

    Using Theme Overrides

    Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

    Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

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

    API References

    Theming Dependencies

    Additional Resources

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