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 importarlosIgxDatePickerModule en tu 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/date-picker';
// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package

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

Alternativamente,16.0.0 puedes importarlosIgxDatePickerComponent como una dependencia independiente, o usar elIGX_DATE_PICKER_DIRECTIVES token 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/date-picker';
// 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 tienes importado el módulo o las directivas del selector de fechas Ignite UI for Angular, puedes empezar a usar eligx-date-picker componente.

Using the Angular Date Picker Component

Display Date picker

Para instanciar un Selector de Fecha en su estado predeterminadodropdown, utiliza el siguiente código:

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

Options

PuedenIgxDatePickerComponent estar vinculados a adate o astring.

<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 solo de fecha en elISO 8601 formato:

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

La unión bidireccional es posible mediantengModel:

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

Así como a través de lavalue entrada:

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

Además,formControlName se puede configurar en el selector para usarlo de 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 unDate valor, lo que significa que si está limitado por modelo o bidireccional a una variable de cadena, tras elegir una nueva fecha, será de tipoDate.

Projecting components

PermiteIgxDatePickerComponent la proyección de componentes hijos que soportaIgxInputGroupComponent (con la excepción deIgxInput) -igxLabel,igx-hint / IgxHint,igx-prefix / igxPrefix,.igx-suffix / igxSuffix Información más detallada sobre esto se puede encontrar en el tema Etiquetas y Entradas.

<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

SeIgxDatePickerComponent pueden configurar conIgxPickerToggleComponent yIgxPickerClearComponent. Estos se pueden usar para cambiar los iconos de toggle y clear sin tener que añadir tus propios handlers 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 puede cambiarse usando lastodayButtonLabel​cancelButtonLabel propiedades de entrada y de Y:

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

• Los botones completos pueden ser configurados mediante laigxPickerActions directiva: Con ella accedes al selectorcalendar 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 laIgxDatePickerComponent interfaz del calendario con el teclado solo está disponible endropdown modo y puede activarse mediante las combinaciones de teclas siguientes:

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.

Como usaIgxDatePickerComponent elIgxDateTimeEditorDirective, hereda su navegación con el teclado.

Examples

Dialog Mode

TambiénIgxDatePickerComponent soporta undialog modo:

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

Display and input format

inputFormatydisplayFormat son propiedades que pueden configurarse para que el editor del selector siga un formato especificado. LainputFormat propiedad se utiliza cuando el selector está endropdown modo y gobierna la máscara editable de la entrada, así como su marcador de posición (si no está activado). Además, esinputFormat basado en la localización, así que si no se proporciona ninguno, el selector se aplicará por defecto al que usa el navegador.

Algo bueno a tener en cuenta es que el componente Angular Selector de Fechas en Ignite UI siempre añadirá un cero inicial en lasdate partes ymonth si se proporcionaron en un formato que no lo tiene, por ejemplo, becomesd/M/yy​dd/MM/yy. Esto solo se aplica durante la edición.

displayFormatpor otro lado, utiliza Angular 'sDatePipe y se usa para formatear la entrada del selector cuando no está enfocada. Si nodisplayFormat se proporciona nada, el selector usará elinputFormat asitdisplayFormat. Alternativamente, si lainputFormat propiedad no está establecida, el formato de entrada se infierirá de eldisplayFormat en caso de que pueda analizarse como conteniendo solo partes numéricas de fecha-hora.

Más información sobre estos se puede encontrar en laIgxDateTimeEditor sección de ejemplos.

Note

AhoraIgxDatePicker soporta entrada IME. Cuando termina la composición, el control convierte los números de carácter ancho en caracteres ASCII.

Increment and decrement

LasIgxDatePickerComponent denunciasincrement ydecrement los métodos. Ambos provienen de yIgxDateTimeEditorDirective pueden usarse para incrementar y decrementar un específicoDatePart de la fecha actualmente establecida.

<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 comospinDelta propiedad de entrada que puede usarse para incrementar o decrementar una fecha específica de la fecha establecida actualmente.

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

In Angular Forms

SoportaIgxDatePickerComponent 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 componentesminValue ymaxValue propiedades actúan como validadores de formularios.

Puedes verloIgxDatePickerComponent en forma reactiva visitando nuestro tema de Integración de Formularios Reactivos.

Usando el selector de fecha y hora juntos

En algunos casos, cuando el IgxDatePicker y elIgxTimePicker se usan juntos, puede que necesitemos que estén vinculados a un mismo valor de objeto Date.

Para lograr eso en formularios basados en plantillas, utiliza elngModel para vincular ambos componentes al mismo objeto Fecha.

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

Calendar Specific settings

UsaIgxDatePickerComponent elIgxCalendarComponent y puedes modificar algunos de sus ajustes mediante las propiedades que expone el selector de fechas. Algunas de ellas incluyendisplayMonthsCount que permite mostrar más de un calendario cuando el selector expande,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 delIgxDatePickerComponent puede controlarse mediante sulocale entrada. Además, usando lasigxCalendarHeader​igxCalendarSubheader plantillas y que proporcionaIgxCalendarComponent, puedes especificar el aspecto de tu cabecera y subencabezado. Más información sobre cómo usar estas plantillas se puede encontrar 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 empezar a estilizar el selector de fechas, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mixin:

@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, así que tenemos que crear un nuevo tema que amplíe elcalendar-theme. Al establecer el$header-background, el tema calcula automáticamente los colores necesarios para las demás propiedades para asegurar 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 unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación utilice::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