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

El selector de intervalo de fechas Angular es un componente ligero que incluye una entrada de texto y una ventana emergente de calendario, lo que permite a los usuarios seleccionar fácilmente las fechas de inicio y finalización. Es altamente personalizable para adaptarse a varios requisitos de la aplicación, ofreciendo características como restricciones de rango de fechas, formatos de fecha configurables y más.

Angular Date Range Picker Example

A continuación se muestra un ejemplo que muestra el IgxDateRangePickerComponent componente en acción, donde una ventana emergente de calendario permite a los usuarios seleccionar fechas de inicio y finalización.

Getting Started with Ignite UI for Angular Date Range Picker

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

Como usa IgxDateRangePickerComponent el IgxCalendarComponent, también tiene una dependencia del BrowserAnimationsModule y, opcionalmente, del HammerModule para las interacciones táctiles, por lo que también deben agregarse al AppModule Widget:

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

Como alternativa, 16.0.0 puede importar como IgxDateRangePickerComponent una dependencia independiente o usar el IGX_DATE_RANGE_PICKER_DIRECTIVES token para importar el componente y todos sus componentes y directivas compatibles.

// 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 el módulo o las directivas del selector de intervalo de fechas Ignite UI for Angular, puede empezar a utilizar el igx-date-range-picker componente.

Using the Angular Date Range Picker Component

Display and Value

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.

El selector ofrece dos modos para mostrar los valores de fecha: entrada única y dos entradas. En el modo de entrada única, el campo no se puede editar y el intervalo de fechas no se puede editar escribiendo. Sin embargo, en el modo de dos entradas, los usuarios pueden editar las fechas de inicio y finalización escribiendo campos de entrada separados.

Cuando el calendario está visible, se puede seleccionar un intervalo de fechas eligiendo una fecha de inicio y una de finalización. Al seleccionar una fecha, se establecerá tanto la fecha de inicio como la de finalización y, una vez que se elija una segunda fecha, se establecerá la fecha de finalización. Si ya se ha seleccionado un intervalo, al hacer clic en cualquier otra fecha del calendario se iniciará una nueva selección de intervalo.

Para crear un enlace de datos bidireccional, use ngModel:

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

Display Separate Editable Inputs

El componente Selector de rango de fechas Angular también permite configurar dos entradas independientes para la fecha de inicio y la fecha de 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.

De forma predeterminada, cuando se hace clic, se IgxDateRangePickerComponent abre su ventana emergente de calendario en dropdown modo. Alternativamente, el calendario se puede abrir en dialog modo estableciendo la Mode propiedad en dialog.

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

En una configuración predeterminada con una sola 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, y en modo desplegable, el calendario solo se puede abrir desde el icono del calendario, ya que ambas entradas son editables de forma predeterminada. Para dos entradas en modo, al hacer clic en dialog cualquier parte de la entrada se abre el calendario

El valor del rango se establece cuando se seleccionan fechas del calendario. Notará que en el modo desplegable, el Done botón no está disponible. En el modo de diálogo, un Cancel botón permite revertir la selección al cerrar.

Cuenta IgxDateRangePickerComponent con una navegación intuitiva con el teclado, lo que permite a los usuarios aumentar, disminuir o saltar fácilmente entre diferentes componentes, todo ello sin necesidad de utilizar un ratón.

Las opciones de navegación del teclado disponibles varían en función de si el componente está en modo de entrada única o de dos entradas.

Modo de dos entradas:

Llaves	Descripción
`←`	Mueve el símbolo de intercalación un carácter a la izquierda
`→`	Mueve el símbolo de intercalación un carácter a la derecha
`Ctrl + ArrowLeft`	Mueve el símbolo de intercalación al principio de la sección de máscara de entrada actual o al principio de la anterior si ya está al principio
`Ctrl + ArrowRight`	Mueve el símbolo de intercalación al final de la sección de máscara de entrada actual o al final de la siguiente si ya está al final
`ArrowUp`	Incrementa la parte actualmente "enfocada" de la máscara de entrada en un paso
`ArrowDown`	Disminuye la parte actualmente "enfocada" de la máscara de entrada en un paso
`Hogar`	Mueve el símbolo de intercalación al principio de la máscara de entrada
`Fin`	Mueve el símbolo de intercalación al final de la máscara de entrada
`Ctrl + ;`	Establece la fecha actual como el valor del componente

Modos de entrada simple y doble:

Llaves	Descripción
`Alt + ArrowDown`	Opens the calendar dropdown
`Alt + ArrowUp`	Closes the calendar dropdown

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

Layout

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.

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

O para dos entradas:

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

Alternar y borrar iconos

En la configuración predeterminada, con una sola entrada de solo lectura, se muestra un icono de calendario predeterminado como prefijo y un icono claro, como sufijo. Estos iconos se pueden cambiar o redefinir usando el IgxPickerToggleComponent comando y IgxPickerClearComponent. Se pueden decorar con uno u otro igxPrefix igxSuffix, que definirá su posición, al comienzo de la entrada o al final, respectivamente:

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

Cuando un selector de intervalo de fechas tiene dos entradas independientes para las fechas de inicio y finalización, no expone estos iconos de forma predeterminada. El IgxPickerToggleComponent y IgxPickerClearComponent debe agregarse manualmente como hijos del IgxDateRangeStartComponent or IgxDateRangeEndComponent de la siguiente manera:

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

Custom And Predefined Date Ranges

También puede agregar chips de rango de fechas personalizados a la ventana emergente del calendario para una selección de rango más rápida usando la customRanges propiedad. Por ejemplo, puede crear un chip de rango de fechas personalizado para seleccionar rápidamente el rango para los próximos 7 días, terminando con la fecha actual. Además, al establecer la usePredefinedRanges propiedad, se mostrará un conjunto de chips de rangos predefinidos junto con los personalizados.

public today = new Date();

public nextSeven = new Date(
    this.today.getFullYear(),
    this.today.getMonth(),
    this.today.getDate() + 7
);

public customRanges: CustomDateRange[] = [
    {
        label: 'Next 7 days',
        dateRange: {
          start: this.today,
          end: this.nextSeven
        }
      }
];

<igx-date-range-picker [usePredefinedRanges]="true" [customRanges]="customRanges"></igx-date-range-picker>

Además, se pueden crear plantillas de contenido o acciones personalizadas mediante la igxPickerActions directiva. En la siguiente demostración se muestran los intervalos predefinidos y personalizados junto con las acciones con plantilla:

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 de DatePipe Angular que se enumeran. Esto le permite admitir opciones de formato predefinidas, como shortDate y longDate.

La propiedad inputFormat acepta una cadena de formato construida con 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 identificación de configuración regional Angular al crearla.

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

Si no se establece la inputFormat propiedad, el formato de entrada se deducirá de la displayFormat en caso de que se pueda analizar como si solo contuviera partes numéricas de fecha y hora.

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 del selector de intervalo 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 y disabledDates también actúan como validadores de formularios.

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>

Disabled And Special dates

También tiene la capacidad de establecer fechas deshabilitadas en el calendario para reducir el rango de fechas que el usuario puede elegir. Para establecer las fechas deshabilitadas, puede usar la disabledDates propiedad.

export class DateRangeSampleComponent implements OnInit {
    @ViewChild('dateRange') public dateRange: IgxDateRangePicker;

    public minDate = new Date(2025, 4, 1);
    public maxDate = new Date(2025, 4, 31);

    public ngOnInit() {
        this.dateRange.disabledDates = [
        {
            type: DateRangeType.Between,
            dateRange: [minDate, maxDate]
        }
        ] as DateRangeDescriptor[];
    }
}

Puedes ver más información sobre todas las posibilidades que ofrece el DisabledDates inmueble aquí: calendario fechas desactivadas.

También puede hacer lo mismo si desea establecer una o más fechas especiales en el calendario; La única diferencia es que debe usar la SpecialDates propiedad en su lugar. Fechas especiales

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>

Calendar specific settings

Puede personalizar aún más el calendario emergente utilizando varias propiedades. Puede encontrar más información sobre cómo afectan al calendario en el tema IgxCalendarComponent.

Nombre	Tipo	Descripción
`orientation`	'vertical' or 'horizontal'	Permite establecer si el calendario debe visualizarse vertical u horizontalmente.
`displayMonthsCount`	cadena	Controla cuántos meses son visibles a la vez, con un valor de 1 o 2.
`showWeekNumbers`	cadena	Habilita o deshabilita la columna de número de semana en el calendario.
`weekStart`	cadena	Establece el día de inicio de la semana.
`hideOutsideDays`	booleano	Oculta los días que quedan fuera de la vista del mes actual.
`hideHeader`	booleano	Oculta el encabezado del calendario (aplicable solo en el modo de diálogo).
`headerOrientation`	'vertical' or 'horizontal'	Aligns the calendar header vertically or horizontally (dialog mode only).
`activeDate`	Fecha	Establece la fecha que se resalta inicialmente en el calendario. Si no se establece, la fecha actual se convierte en la fecha activa.

 <igx-date-range-picker [hideHeader]="true"
                        [orientation]="'vertical'"
                        [headerOrientation]="'horizontal'"
                        [displayMonthsCount]="1">
</igx-date-range-picker>

Las partes de encabezado, subencabezado y título del encabezado del calendario se pueden personalizar aprovechando las igxCalendarHeader igxCalendarSubheader directivas y las directivas de igxCalendarHeaderTitle plantilla, por ejemplo:

<igx-date-range-picker [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>
    <ng-template igxCalendarHeaderTitle let-format>
    <span>My calendar</span>
  </ng-template>
</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;
$light-gray: #efefef;

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

$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(
  $filled-text-color: $text-color,
  $idle-text-color: $text-color,
  $focused-text-color: $color-focused,
  $idle-bottom-line-color: $purple,
  $hover-bottom-line-color: $color-focused,
  $interim-bottom-line-color: $color-focused
);

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

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

Warning

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::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.

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

Angular Date Range Picker Example

Getting Started with Ignite UI for Angular Date Range Picker

Using the Angular Date Range Picker Component

Display and Value

Note

Display Separate Editable Inputs

Keyboard Navigation

Layout

Projecting components

Alternar y borrar iconos

Custom And Predefined Date Ranges

Formatting

Note

Forms and Validation

Min and max values

Disabled And Special dates

Templating

Calendar specific settings

Estilismo

Warning

Scoping Styles

Application Demo

API References

Theming Dependencies

Additional Resources

Tematización

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

Angular Date Range Picker Example

Getting Started with Ignite UI for Angular Date Range Picker

Using the Angular Date Range Picker Component

Display and Value

Note

Display Separate Editable Inputs

Popup modes

Keyboard Navigation

Layout

Projecting components

Alternar y borrar iconos

Custom And Predefined Date Ranges

Formatting

Note

Forms and Validation

Min and max values

Disabled And Special dates

Templating

Calendar specific settings

Estilismo

Warning

Scoping Styles

Application Demo

API References

Theming Dependencies

Additional Resources

Tematización