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 elIgxDateRangePickerComponent componente en acción, donde una ventana emergente en el calendario permite a los usuarios seleccionar fechas de inicio y finalización.

Getting Started with Ignite UI for Angular Date Range Picker

Para empezar con el componente Ignite UI for AngularIgxDateRangePickerComponent, primero necesitas instalar Ignite UI for Angular. En una aplicación Angular existente, escribe 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 importarlosIgxDateRangePickerModule en tu archivo app.module.ts.

Como utilizaIgxDateRangePickerComponent el IgxCalendarComponent, también depende del BrowserAnimationsModule y, opcionalmente, del HammerModule para interacciones táctiles, por lo que también deben añadirse a laAppModule:

// app.module.ts

import { IgxDateRangePickerModule } from 'igniteui-angular/date-picker';
// 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,16.0.0 puedes importarlosIgxDateRangePickerComponent como una dependencia independiente, o usar elIGX_DATE_RANGE_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_RANGE_PICKER_DIRECTIVES } from 'igniteui-angular/date-picker';
// 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 tienes importado el módulo o las directivas del selector de intervalo de Ignite UI for Angular fechas, puedes empezar a usar eligx-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 intervalo de fechas es de tipoDateRange, que contiene una fecha de inicio y una 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, utilizangModel:

<igx-date-range-picker [(ngModel)]="range"></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 usando elIgxDateRangeStartComponent yIgxDateRangeEndComponent como hijos del selector de intervalos de fechas, como se muestra en la demostración siguiente:

<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 elIgxDateRangeStartComponent yIgxDateRangeEndComponent extienden lo existenteIgxInputGroupComponent. Para que tal configuración funcione, se requiere definir un.IgxInput Además, también pueden utilizarse todos los demás componentes y directivas disponibles para elIgxInputGroupComponent.
Para habilitar la edición de fechas en ambas entradas, necesitas decorarlas conigxDateTimeEditor directivas.

Por defecto, al hacer clic,IgxDateRangePickerComponent se abre su ventana emergente en el calendario endropdown modo. Alternativamente, el calendario puede abrirse endialog modo configurando laMode propiedad endialog.

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

En una configuración predeterminada con una única entrada de solo lectura, el calendario puede abrirse haciendo clic en cualquier parte de la entrada, incluido el icono del calendario. Cuando hay dos entradas separadas para la fecha de inicio y fin, y en modo desplegable, el calendario solo puede abrirse desde el icono del calendario, ya que ambas entradas son editables por defecto. Para dos entradas endialog modo, hacer clic en cualquier parte de la entrada abre el calendario

El valor del rango se establece cuando se seleccionan fechas del calendario. Verás que en el modo desplegable, elDone botón no está disponible. En modo diálogo, unCancel botón permite revertir la selección al cerrar.

CuentaIgxDateRangePickerComponent con una navegación intuitiva por teclado, permitiendo a los usuarios incrementar, decrementar o saltar fácilmente entre diferentes componentes, todo ello sin necesidad de usar 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 Intervalo de Fechas, el componente permite proyectar componentes hijos, igual que en elIgxInputGroupComponent:igxLabel,igx-hint / igxHint,igx-prefix / igxPrefix,igx-suffix / igxSuffix, excluyendoIgxInput. Información más detallada sobre esto se puede encontrar en el tema Etiquetas y Entradas.

<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 única entrada de solo lectura, un icono de calendario predeterminado se muestra como prefijo y un icono de borrar como sufijo. Estos iconos pueden cambiarse o redefinirse usando elIgxPickerToggleComponent yIgxPickerClearComponent. Pueden decorarse con cualquieraigxPrefix de los dos,igxSuffix lo que definirá su posición - al inicio 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 separadas para las fechas de inicio y fin, no expone estos iconos por defecto. LosIgxPickerToggleComponent yIgxPickerClearComponent deben añadirse manualmente como hijos de oIgxDateRangeStartComponentIgxDateRangeEndComponent así:

<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 puedes añadir chips de rango de fechas personalizados a la ventana emergente del calendario para una selección de rango más rápida usando lacustomRanges propiedad. Por ejemplo, puedes crear un chip personalizado para el rango de fechas que seleccione rápidamente el rango de los próximos 7 días, terminando con la fecha actual. Además, al establecer lausePredefinedRanges 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, el contenido o acciones personalizadas pueden ser plantillas usando laigxPickerActions directiva. La siguiente demo muestra los rangos predefinidos y personalizados junto con las acciones con plantillas:

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 listados Angular DatePipe. Esto le permite soportar opciones de formato predefinidas, comoshortDate ylongDate.

LainputFormat propiedad acepta una cadena de formato construida usando caracteres soportados por el DatePipe, por ejemploMM/dd/yyyy, pero no admite opciones de formato predefinidas, comoshortDate ylongDate. Si lainputFormat propiedad no está definida, se utiliza el token de ID de Angular localidad al construirla.

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

Si lainputFormat propiedad no está establecida, el formato de entrada se infierirá de ladisplayFormat en caso de que pueda analizarse como conteniendo solo partes numéricas de fecha-hora.

Note

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

Forms and Validation

El componente Selector de Intervalo de Fechas soporta 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ínimos y máximos del componente y las desactivadas Fechas también actúan como validadores de formularios.

El NgModel y los validadores pueden configurarse en oIgxDateRangePickerComponent en las entradas individuales de inicio y fin de la fecha.

Los siguientes fragmentos y ejemplos ilustran el uso delrequired validador en una forma basada en Plantillas.

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

Puedes especificarminValue propiedades ymaxValue para restringir la entrada del usuario desactivando 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>

ElIgxDateRangePickerComponent también es un validador, lo que significa que controla su validez internamente usandominValue ymaxValue. También puedes acceder a ambos a través dengModel:

<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 tienes la opción de establecer fechas desactivadas en el calendario para reducir el rango de fechas que el usuario puede elegir. Para establecer las fechas de desactivación, puedes usar ladisabledDates 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 laDisabledDates propiedad aquí: calendario de fechas de discapacidad.

También puedes hacer lo mismo si quieres establecer una o más fechas especiales en el calendario; La única diferencia es que tienes que usar laSpecialDates propiedad en su lugar. Fechas especiales

Templating

Cuando se usan dos editores, el separador por defecto puede reemplazarse mediante laigxDateRangeSeparator directiva. Así es como cambiar el separador de fechas por un guion-:

<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 cabecera, subtítulo y título de la cabecera del calendario pueden personalizarse aprovechando lasigxCalendarHeaderigxCalendarSubheader directivas de plantillaigxCalendarHeaderTitle, 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 empezar a estilizar eligxDateRangePicker, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

@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 Intervalo de Fechas exponedate-range-picker-theme y utiliza varios componentes y directivas, incluyendoigxInputGroupComponent,igxCalendar yigxOverlay. Cualquier diseño global para los componentes y directivas mencionados afectará a eligxDateRangeComponent. Como el Componente Selector de Intervalos de Fechas utiliza los temas de grupo de entrada y calendario, tenemos que crear nuevos temas que amplíen loscalendar-theme yinput-group-theme y utilicen algunos de sus parámetros para estilizar el selector de intervalos de fechas junto con el tema del selector de rangos de fechas. Utilizaremos una única paleta de colores personalizada para definir los colores a utilizar 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 unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación utilice::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 demo de abajo define un formulario para billetes de avión que utiliza elIgxDateRangePickerComponent. Si no se seleccionan fechas, se utiliza anIgxHint para mostrar un error de validación. La selección de las fechas está restringida por lasminValue propiedadesmaxValue y de laIgxDateRangePickerComponent

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