Descripción general del componente del selector de rango de fechas Angular

Angular Date Range Picker es un componente liviano que incluye entrada de texto y una ventana emergente de calendario para permitir a los usuarios seleccionar fácilmente valores de fecha de inicio y finalización. Se puede personalizar para que coincida con los requisitos de la aplicación con funciones como restricciones de rango, formatos, selección de rango de datos, agrupación de valores iniciales y finales y muchas más. El selector de rango de fechas en Angular también permite a los desarrolladores cambiar la propiedad de vista predeterminada y establecerla en mes, año o varios años.

Angular Date Range Picker Example

Hemos creado este ejemplo básico de Selector de rango de fechas Angular para mostrarle el componente en acción. En este caso, verá una ventana emergente de calendario que permite a los usuarios seleccionar los valores de fecha de inicio y finalización.

Getting Started with Ignite UI for Angular Date Range Picker

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 IgxDateRangePickerModule en su archivo app.module.ts.

Como IgxDateRangePicker usa IgxCalendarComponent, también depende de BrowserAnimationsModule y HammerModule para interacciones táctiles, por lo que también deben agregarse a AppModule:

// app.module.ts

import { IgxDateRangePickerModule } from 'igniteui-angular';
// import { IgxDateRangePickerModule } from '@infragistics/igniteui-angular'; for licensed package

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

Alternativamente, a partir de 16.0.0, puede importar IgxDateRangePickerComponent como una dependencia independiente o usar el token IGX_DATE_RANGE_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_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DATE_RANGE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-date-range-picker [value]="range"></igx-date-range-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_RANGE_PICKER_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDateRangePickerComponent] */
})
export class HomeComponent {}

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

Using the Angular Date Range Picker Component

Display Date Range Picker

Para crear una instancia de un selector de rango de fechas en su modo predeterminado, use el siguiente código:

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

public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, 25) };

Note

El valor del Selector de rango de fechas es de tipo DateRange, que contiene una fecha de inicio y una fecha de finalización.

Para crear un enlace de datos bidireccional, use ngModel:

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

Projecting components

Para enriquecer la experiencia de usuario predeterminada del selector de rango de fechas, el componente permite proyectar componentes secundarios, lo mismo que en IgxInputGroupComponent: igxLabel, igx-hint / igxHint, igx-prefix / igxPrefix, igx-suffix / igxSuffix, excluyendo IgxInput. Puede encontrar información más detallada sobre esto en el tema Etiqueta y entrada.

Además, la Ignite UI for Angular se puede configurar para proyectar IgxPickerToggleComponent, un componente que controla la alternancia del calendario y se puede modificar como se muestra en la sección de alternancia del calendario.

<igx-date-range-picker #dateRangePicker [(ngModel)]="range">
    <label igxLabel>Flight dates</label>
    <igx-hint *ngIf="dateRangePicker.invalid">
        Please choose start and end date!
    </igx-hint>
</igx-date-range-picker>

Display Separate Editable Inputs

El componente Angular Date Range Picker también permite configurar dos entradas separadas para la fecha de inicio y finalización. Esto se puede lograr utilizando IgxDateRangeStartComponent e IgxDateRangeEndComponent como elementos secundarios del selector de rango de fechas, como se muestra en la demostración a continuación:

<igx-date-range-picker [(ngModel)]="range">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

• Tanto IgxDateRangeStartComponent como IgxDateRangeEndComponent amplían el IgxInputGroupComponent existente. Para que dicha configuración funcione, es necesario definir un IgxInput. Además, también se pueden utilizar todos los demás componentes y directivas disponibles para IgxInputGroupComponent.
• Para habilitar la edición de fechas para ambas entradas, debe decorarlas con la directiva igxDateTimeEditor.

User Experience

En una configuración predeterminada, con una única entrada de solo lectura, el calendario se puede abrir haciendo clic en cualquier parte de la entrada, incluido el icono del calendario. Cuando hay dos entradas separadas para la fecha de inicio y finalización, el calendario solo se puede abrir desde el icono del calendario, ya que ambas entradas son editables de forma predeterminada.

Cuando el calendario está visible, se puede seleccionar un rango eligiendo las fechas de inicio y finalización. Al elegir una fecha se establecerá la fecha de inicio y finalización, hasta que se elija una segunda fecha. Si hay un rango seleccionado, al hacer clic en cualquier otra fecha del calendario se iniciará una nueva selección de rango.

Las fechas de inicio y finalización están separadas por un guión cuando se muestran en la entrada de solo lectura del componente. Al definir diferentes entradas para el inicio y el final, están separadas por la preposición to. Este último se puede localizar o sobrescribir mediante una plantilla. Consulte el ejemplo de plantillas a continuación para obtener más detalles.

Examples

Label

Para definir la etiqueta para el selector de rango de fechas, se debe usar la directiva igxLabel como se muestra en el siguiente fragmento:

<igx-date-range-picker [(ngModel)]="range">
    <label igxLabel>Flight dates</label>
</igx-date-range-picker>

Calendar toggle

En la configuración predeterminada, con una única entrada de solo lectura, se muestra un icono de calendario predeterminado como prefijo. El icono del calendario 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. Para cambiar la posición predeterminada y mostrar el icono como sufijo, debe hacer lo siguiente:

<igx-date-range-picker>
    <igx-picker-toggle igxSuffix>
        <igx-icon>calendar_view_day</igx-icon>
    </igx-picker-toggle>
</igx-date-range-picker>

Cuando un Selector de rango de fechas tiene dos entradas separadas, para las fechas de inicio y finalización, no muestra un icono de calendario de forma predeterminada. El IgxPickerToggleComponent debe agregarse manualmente como hijo de IgxDateRangeStartComponent o IgxDateRangeEndComponent de esta manera:

<igx-date-range-picker>
    <igx-date-range-start>
        ...
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_view_day</igx-icon>
        </igx-picker-toggle>
        ...
    </igx-date-range-start>
    <igx-date-range-end>
        ...
    </igx-date-range-end>
</igx-date-range-picker>

Dialog mode

El componente IgxDateRangePickerComponent tiene dos modos: menú desplegable (predeterminado) y diálogo. Para cambiar al modo dialog, haga lo siguiente:

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

El valor del rango se establece cuando se seleccionan fechas del calendario. Notarás que en el modo desplegable, el botón Done no está disponible.

Custom Action Buttons

Los botones de acción del Selector de rango de fechas se pueden crear como plantilla usando la directiva igxPickerActions. Un escenario común es permitir al usuario seleccionar entre rangos predefinidos, como en la siguiente demostración:

Keyboard Navigation

Note

Utilice las demostraciones del modo de diálogo y Mostrar entradas editables separadas para probar las combinaciones de teclado que se definen a continuación.

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

• Alt + Flecha hacia abajo: abre el menú desplegable que contiene la interfaz de usuario del calendario y lo enfoca.
• Alt + Flecha arriba: cierra el menú desplegable y enfoca el campo de entrada (campo de entrada de inicio de rango cuando se utilizan dos entradas separadas)
• Esc: cierra el menú desplegable y enfoca el campo de entrada (campo de entrada de inicio de rango cuando se utilizan dos entradas separadas)

La navegación con el teclado dentro de la interfaz de usuario del calendario del Selector de rango de fechas está disponible en todos los modos y configuraciones. Cuando se abre el calendario, se enfoca y se pueden usar las siguientes combinaciones de teclado:

• Ingresar selecciona fechas de inicio y finalización
• Re Pág, Av Pág, Mayús + Re Pág, Mayús + Av Pág, Inicio, Fin, Tabulador: navegar por el calendario

La sección de navegación del teclado del calendario contiene todas las combinaciones de teclado que se pueden usar en el calendario.

Cuando se utilizan dos entradas separadas, la navegación con el teclado para la directiva igxDateTimeEditor también se aplica al componente Selector de rango de fechas:

• Ctrl / Cmd + Flecha izquierda / derecha: navega entre secciones de fecha. Con Ctrl / Cmd + Derecha va al final de la sección. Si ya está allí, pasará al final de la siguiente sección. Funciona de la misma manera en la dirección opuesta.
• Flecha arriba / abajo: aumenta/disminuye partes de la fecha.
• Ctrl / Cmd +;- establece el día y la hora actuales en el editor.

Formatting

El componente Selector de rango de fechas admite diferentes formatos de visualización y entrada.

El formato de visualización del valor puede ser uno de los formatos Angular DatePipe enumerados. Esto le permite admitir opciones de formato predefinidas, como shortDate y longDate.

La propiedad inputFormat acepta una cadena de formato construida utilizando caracteres admitidos por DatePipe, por ejemplo MM/dd/yyyy, pero no admite opciones de formato predefinidas, como shortDate y longDate. Si la propiedad inputFormat no está definida, se utiliza el token de ID de configuración regional Angular al compilarlo.

<igx-date-range-picker [(ngModel)]="range" required
    inputFormat="dd/MM/yyyy" displayFormat="shortDate">
</igx-date-range-picker>

Note

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

Forms and Validation

El componente Selector de rango de fechas 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.

​NgModel y los validadores se pueden configurar en IgxDateRangePickerComponent o en las entradas de fecha de inicio y finalización individuales.

Los siguientes fragmentos y ejemplos ilustran el uso del validador required en un formato basado en plantilla.

Primero, necesitamos configurar el modelo para un único componente de rango de solo lectura, lo cual se realiza a nivel de componente:

<igx-date-range-picker [(ngModel)]="range" required>
    <label igxLabel>Period</label>
</igx-date-range-picker>

Se puede utilizar la misma configuración al configurar dos entradas separadas. Tenga en cuenta que en este caso, la validación también se aplica a ambas entradas.

<igx-date-range-picker [(ngModel)]="range" required>
    <igx-date-range-start>
        <label igxLabel>Start Date</label>
        <input igxInput igxDateTimeEditor type="text">
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_today</igx-icon>
        </igx-picker-toggle>
    </igx-date-range-start>
    <igx-date-range-end>
        <label igxLabel>End Date</label>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

Cuando se utilizan dos entradas separadas, es posible configurar el modelo y las propiedades requeridas en cada entrada. Tenga en cuenta que la validación es específica para cada entrada individual.

<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

Min and max values

Puede especificar las propiedades minValue y maxValue para restringir la entrada del usuario deshabilitando las fechas del calendario que están fuera del rango definido por esos valores.

public minDate = new Date(2020, 1, 15);
public maxDate = new Date(2020, 11, 1);

<igx-date-range-picker [(ngModel)]="range" required
    [minValue]="minDate" [maxValue]="maxDate">
</igx-date-range-picker>

<igx-date-range-picker [minValue]="minDate" [maxValue]="maxDate">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

​IgxDateRangePickerComponent también es un validador, lo que significa que controla su validez internamente utilizando minValue y maxValue. También puedes acceder a ambos a través de ngModel:

<igx-date-range-picker #dateRangePicker="ngModel" [(ngModel)]="range" required
    [minValue]="minDate" [maxValue]="maxDate">
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor type="text">
    </igx-date-range-end>
</igx-date-range-picker>

<!-- minValue & maxValue will be true if the current range does not satisfy them -->
<div *ngIf="dateRangePicker.minValue || dateRangePicker.maxValue">
    <p>Value not in range.</p>
</div>

Templating

Cuando se utilizan dos editores, el separador predeterminado se puede reemplazar usando la directiva igxDateRangeSeparator. A continuación se explica cómo cambiar el separador de fecha a un guión-​

<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
    </igx-date-range-start>
    <ng-template igxDateRangeSeparator>-</ng-template>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
    </igx-date-range-end>
</igx-date-range-picker>

Estilismo

Para comenzar a diseñar el igxDateRangePicker, 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 componente Selector de rango de fechas expone date-range-picker-theme y utiliza varios componentes y directivas, incluidos igxInputGroupComponent, igxCalendar e igxOverlay. Cualquier estilo global para los componentes y directivas antes mencionados afectará al igxDateRangeComponent. Como el componente Selector de rango de fechas utiliza el grupo de entrada y los temas de calendario, tenemos que crear nuevos temas que extiendan el calendar-theme y input-group-theme y usar algunos de sus parámetros para diseñar el selector de rango de fechas junto con el rango de fechas. tema del selector. Usaremos una única paleta de colores personalizada para definir los colores que se usarán en todos los temas:

// COMMON
$purple: #9E379F;
$blue: #61AEDB;

$custom-palette: palette($primary: $blue, $secondary: $purple);

$today-text: color($custom-palette, "primary", 500);
$text-color: color($custom-palette, "secondary", 200);
$color-focused: color($custom-palette, "secondary", 500);

// DATE-RANGE
$custom-date-range-theme:date-range-picker-theme(
    $label-color: $color-focused
);

// INPUT GROUP
$custom-input-group-theme: input-group-theme(
  $palette: $custom-palette,
  $filled-text-color: $text-color,
  $idle-text-color: $text-color,
  $focused-text-color: $color-focused,
  $hover-bottom-line-color: $color-focused,
  $idle-bottom-line-color: $purple
);

// CALENDAR
$custom-calendar-theme: calendar-theme(
    $palette: $custom-palette,
    $date-current-text-color: $today-text,
    $border-radius: 0.5,
    $date-border-radius: 0.5
);

Using CSS variables

El último paso es pasar los temas personalizados:

@include css-vars($custom-date-range-theme);
@include css-vars($custom-input-group-theme);
@include css-vars($custom-calendar-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 penetrarlo 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 date-range-picker($custom-date-range-theme);
       @include input-group($custom-input-group-theme);
       @include calendar($custom-calendar-theme);
   }
}

Scoping Styles

Con respecto al alcance del estilo, debe consultar las secciones de estilo [Estilos de componentes con alcance de superposición] (overlay-styling.md#Estilos de superposición con alcance) y Estilos de alcance del grupo de entrada, ya que brindan más información.

Application Demo

La siguiente demostración define un formulario para boletos de avión que utiliza IgxDateRangePickerComponent. Si no se selecciona ninguna fecha, se utiliza un IgxHint para mostrar un error de validación. La selección de fechas está restringida por las propiedades minValue y maxValue de IgxDateRangePickerComponent.

API References

• Componente IgxDateRangePicker
• 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

Temas relacionados:

• Editor de fecha y hora
• Etiqueta y entrada
• Integración de formularios reactivos
• Selector de fechas

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub