Descripción general del selector de intervalo de fechas de React
El selector de intervalo de fechas Ignite UI for React 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.
Date Range Picker Example
A continuación se muestra un ejemplo que muestra elIgrDateRangePicker componente en acción, donde una ventana emergente en el calendario permite a los usuarios seleccionar fechas de inicio y finalización.
Empezando
To start using the IgrDateRangePicker, you first need to install the Ignite UI for React by running the following command:
npm install igniteui-react
After that, you need to import the IgrDateRangePicker and its necessary CSS, as follows:
import { IgrDateRangePicker } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
Ahora puedes empezar con una configuración básica de la ReactIgrDateRangePicker.
Para una introducción completa al Ignite UI for React, lee el tema Empezar.
Usage
PermiteIgrDateRangePicker a los usuarios seleccionar una fecha de inicio y fin eligiendo un rango de fechas en un desplegable o ventana emergente del calendario o escribiendo directamente en los campos de entrada: uno para la fecha de inicio y otro para la fecha de finalización.
El selector ofrece dos modos para mostrar los valores de fecha: una sola entrada 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 fecha de finalización. Al seleccionar una fecha, se establecerá la fecha de inicio y finalización, y una vez que se elija una segunda fecha, se establecerá la fecha de finalización. Si ya hay un rango seleccionado, al hacer clic en cualquier otra fecha del calendario se iniciará una nueva selección de rango.
Display Date Range Picker
Para instanciar aIgrDateRangePicker en su modo de entrada única por defecto, utiliza el siguiente código:
<IgrDateRangePicker/>
Para cambiar elIgrDateRangePicker uso de dos entradas, establece lauseTwoInputs propiedad entrue.
<IgrDateRangePicker useTwoInputs/>
Value
Además de ser seleccionado o tipado por el usuario, el valor de rango de laIgrDateRangePicker también puede establecerse usando lavalue propiedad. Es importante señalar que el valor debe seguir el formato: { start: startDate, end: endDate }, dondestartDate yendDate sonDate objetos que representan el rango seleccionado.
const dateRangeRef = useRef<IgrDateRangePicker>();
let startDate = new Date(2025, 4, 6);
let endDate = new Date(2025, 4, 8);
useEffect (() => {
dateRangeRef.current.value = { start: startDate, end: endDate }
}, [])
return (
<IgrDateRangePicker ref={dateRangeRef} />
);
<IgrDateRangePicker value={{start: new Date('2025-01-01'), end: new Date('2025-01-02')}}/>
Read-only & Non-editable
También puedes hacer que elIgrDateRangePicker solo de lectura, que desactiva cambiar el valor del rango tanto al escribir como a la selección del calendario, desactiva la navegación con teclado y hace que los iconos del calendario y de la limpieza parezcan visualmente deshabilitados. Esto es útil cuando el rango se asigna mediante el atributo valor y está pensado para mostrar solo a la pantalla. Para habilitar este comportamiento, simplemente establece lareadOnly propiedad.
<IgrDateRangePicker useTwoInputs readOnly/>
Alternativamente, puedes usar lanonEditable propiedad que, a diferenciareadOnly de ella, solo impide editar la(s) entrada(s) mediante la escritura, pero aún así permite seleccionar desde el calendario y borrar mediante el icono de limpiar.
<IgrDateRangePicker useTwoInputs nonEditable/>
Popup modes
Por defecto, al hacer clic,IgrDateRangePicker se abre su ventana emergente en el calendario endropdown modo. Alternativamente, el calendario puede abrirse endialog modo configurando lamode propiedad endialog.
<IgrDateRangePicker mode='dialog'/>
Keyboard Navigation
CuentaIgrDateRangePicker 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 + ↓ | Opens the calendar dropdown |
| ALT + ↑ | Closes the calendar dropdown |
También puedes navegar dentro de la ventana emergente del calendario usando el teclado. La navegación es la misma que en elIgrCalendar componente.
| Llaves | Descripción |
|---|---|
| ↑ / ↓ / ← / → | Navega a través de los días del mes |
| ENTER | Selecciona el día en el que se centra actualmente |
| PÁGINA ARRIBA | Pasa a la vista del mes anterior |
| PÁG ABAJO | Pasa a la vista del mes siguiente |
| SHIFT + PAGE UP | Se traslada al año anterior |
| SHIFT + PAGE DOWN | Pasa al año siguiente |
| HOGAR | Se centra en el primer día del mes actual que está a la vista (o el mes más antiguo en el que se muestra la vista de más de un mes) |
| FIN | Se centra en el último día del mes actual que está a la vista. (o el último mes cuando se muestra la vista de más de un mes) |
| Escape | Cierra la ventana emergente del calendario |
Layout
Label
Puedes definir una etiqueta para elIgrDateRangePicker componente usando lalabel propiedad cuando está en modo de entrada única. En modo de dos entradas, puedes usar laslabelStart propiedades ylabelEnd para definir etiquetas para los campos de entrada de la fecha de inicio y fin, respectivamente.
<IgrDateRangePicker label='Date Range'/>
<IgrDateRangePicker useTwoInputs labelStart='Start Date' labelEnd='End Date'/>
Format
También tienes la opción de personalizar el formato de fecha que se muestra en los campos de entrada. Hay tres propiedades disponibles para este propósito:locale,inputFormat, ydisplayFormat.
Lalocale propiedad te permite establecer el identificador de localidad deseado, que determina cómo se formatea la fecha según las convenciones regionales. Por ejemplo, para mostrar la fecha en un formato japonés, puedes establecer la propiedad de localización así:
<IgrDateRangePicker locale='ja-JP'/>
Si quieres definir manualmente el formato de fecha, puedes usar lainputFormat propiedad pasando una cadena de formato personalizada:
<IgrDateRangePicker inputFormat='dd/MM/yy'/>
LadisplayFormat propiedad también acepta una cadena de formato personalizada, pero solo se aplica cuando el campo de entrada está inactivo (es decir, no enfocado). Cuando el campo está enfocado, el formato vuelve al valor predeterminado o al definido porinputFormat, si se usan ambas propiedades juntas:
<IgrDateRangePicker inputFormat='dd/MM/yy' displayFormat='yy/MM/dd'/>
Calendar Layout and Formatting
You can further customize the pop-up calendar using various properties:
| Nombre | Tipo | Descripción |
|---|---|---|
orientation |
'vertical' or 'horizontal' | Permite establecer si el calendario debe visualizarse vertical u horizontalmente. |
visibleMonths |
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. |
open |
booleano | Determina si el selector de calendario está abierto. |
keepOpenOnSelect |
booleano | Mantiene abierto el selector de calendario después de seleccionar una fecha. |
keepOpenOnOutsideClick |
booleano | Mantiene abierto el selector de calendario al hacer clic fuera de él. |
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. |
<IgrDateRangePicker orientation='vertical' visibleMonths={1} showWeekNumbers/>
Min & Max
También puedes configurar lasmin propiedades ymax para restringir la entrada del usuario desactivando fechas del calendario fuera del rango definido. Estas propiedades actúan como validadores, por lo que incluso si el usuario escribe manualmente una fecha fuera del rango, laIgrDateRangePicker fecha se vuelve inválida.
<IgrDateRangePicker min={new Date('2025-05-06')} max={new Date('2025-05-10')}/>
Custom & 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.
const today = new Date();
const nextSeven = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() + 7
);
const nextWeek: CustomDateRange[] = [
{
label: "Next 7 days",
dateRange: {
start: today,
end: nextSeven
}
}
];
return (
<IgrDateRangePicker usePredefinedRanges customRanges={nextWeek} />
);
Ahora, cuando haga clic en el chip "Próximos 7 días" recién creado en la ventana emergente del calendario, el rango se seleccionará automáticamente, desde hoy hasta los próximos 7 días.
Disabled & 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.
const dateRangeRef = useRef<IgrDateRangePicker>();
const minDate = new Date(2025, 4, 5);
const maxDate = new Date(2025, 4, 15);
useEffect (() => {
dateRangeRef.current.disabledDates = [
{
type: DateRangeType.Between,
dateRange: [minDate, maxDate]
}
] as DateRangeDescriptor[];
}, [])
return (
<IgrDateRangePicker ref={dateRangeRef} />
);
Puedes ver más información sobre todas las posibilidades que ofrece ladisabledDates propiedad aquí: Fechas para personas con 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
Forms
ElIgrDateRangePicker componente también puede usarse sin problemas con el elemento de formulario HTML. Lasmin propiedades de Y,max yrequired actúan como validadores de formularios.
Additional configuration
Properties
Además de las propiedades que ya hemos tratado, elIgrDateRangePicker componente ofrece una variedad de propiedades adicionales que permiten configurar aún más su comportamiento.
| Nombre | Tipo | Descripción |
|---|---|---|
disabled |
booleano | Deshabilita el componente. |
nonEditable |
booleano | Deshabilita la escritura en los campos de entrada. |
placeholder |
cadena | Texto de marcador de posición para el modo de entrada única. |
placeholderStart |
cadena | Texto de marcador de posición para la entrada de fecha de inicio (modo de dos entradas). |
placeholderEnd |
cadena | Texto de marcador de posición para la entrada de fecha de finalización (modo de dos entradas). |
outlined |
booleano | Determina si la parte de entrada tendrá apariencia de contorno en el tema Material. |
prompt |
cadena | Carácter de solicitud utilizado para las partes sin rellenar de la máscara de entrada. |
resourceStrings |
IgcDateRangePickerResourceStrings | Cadenas de recursos para la localización del selector de intervalo de fechas y el calendario. |
Slots
También tienes la posibilidad de añadir contenido personalizado y modificar la apariencia delIgrDateRangePicker componente usando las ranuras disponibles.
Lasprefix ranuras ysuffix permiten insertar contenido personalizado antes o después del campo de entrada (disponible solo en modo de entrada única):
<IgrDateRangePicker>
<IgrIcon slot='prefix' name='down_arrow_icon'></IgrIcon>
<IgrIcon slot='suffix' name='upload_icon'></IgrIcon>
</IgrDateRangePicker>
En modo de dos entradas, puedes usar lasprefix-start ranuras yprefix-endsuffix-startsuffix-end para dirigir las entradas individuales.
Otro conjunto de ranuras útiles sonclear-icon los andcalendar-icon, que te permiten personalizar los iconos de los botones de borrar y calendario en los campos de entrada:
<IgrDateRangePicker>
<IgrIcon slot="clear-icon" name="apps_icon"></IgrIcon>
<IgrIcon slot="calendar-icon" name="bin_icon"></IgrIcon>
</IgrDateRangePicker>
En el modo de dos entradas, también puedes personalizar el texto predeterminado "para" entre los campos usando laseparator ranura:
<IgrDateRangePicker useTwoInputs>
<span slot='separator'>till</span>
</IgrDateRangePicker>
Laactions ranura te permite insertar un botón de acción personalizado con tu propia lógica. Por ejemplo, el botón de abajo activa la columna de números de las semanas en el calendario:
const dateRangeRef = useRef<IgrDateRangePicker>();
const toggleWeekNumbers = () => {
dateRangeRef.current.showWeekNumbers = !dateRangeRef.current.showWeekNumbers;
};
return (
<IgrDateRangePicker ref={dateRangeRef}>
<IgrButton slot="actions" onClick={toggleWeekNumbers}>Toggle Week Numbers</IgrButton>
</IgrDateRangePicker>
);
Además de las tragaperras que ya hemos cubierto, las siguientes también están disponibles en elIgrDateRangePicker componente:
| Nombre | Descripción |
|---|---|
title |
Representa el contenido del título del calendario. Solo aplicable en el modo de diálogo. |
helper-text |
Renders content below the input field(s). |
header-date |
Reemplaza el texto de fecha/intervalo actual predeterminado en el encabezado del calendario. Solo aplicable en el modo de diálogo. |
clear-icon-start |
Icono de borrado personalizado para la entrada de inicio (modo de dos entradas). |
clear-icon-end |
Icono de borrado personalizado para la entrada final (modo de dos entradas). |
calendar-icon-start |
Icono de calendario personalizado para la entrada de inicio (modo de dos entradas). |
calendar-icon-end |
Icono de calendario personalizado para la entrada final (modo de dos entradas). |
calendar-icon-open |
Icono o contenido que se muestra cuando el selector está abierto (se aplica a ambas entradas en el modo de dos entradas). |
calendar-icon-open-start |
Icono o contenido para el estado abierto de la entrada de inicio (modo de dos entradas). |
calendar-icon-open-end |
Icono o contenido para el estado abierto de la entrada final (modo de dos entradas). |
Methods
Además de las propiedades y las ranuras,IgrDateRangePicker también expone algunos métodos que puedes utilizar:
| Nombre | Descripción |
|---|---|
show |
Muestra el componente del selector de calendario. |
hide |
Hides the calendar picker component. |
toggle |
Alterna el selector de calendario entre los estados mostrado y oculto. |
clear |
Borra los campos de entrada, eliminando cualquier entrada del usuario. |
select |
Selecciona un valor de intervalo de fechas en el selector. |
setCustomValidity |
Establece un mensaje de validación personalizado. Si el mensaje proporcionado no está vacío, la entrada se marcará como no válida. |
Styling
Como elIgrDateRangePicker componente utiliza elIgrCalendar componente, también hereda las partes CSS del Calendario, permitiéndote estilizar ambos componentes sin problemas. Puedes encontrar la lista completa de las partes expuestas de Calendar CSS aquí: Calendar Styling. Además de las partes CSS del Calendario,IgrDateRangePicker también expone algunas piezas únicas de CSS que puedes usar para personalizar su apariencia:
| Nombre | Descripción |
|---|---|
separator |
El elemento separador entre las dos entradas. |
ranges |
El contenedor que representa los rangos personalizados y predefinidos. |
label |
El contenedor de etiquetas que representa el contenido por encima de la entrada de destino. |
container |
El contenedor principal que contiene todos los elementos de entrada principales. |
input |
El elemento de entrada nativo. |
prefix |
El contenedor de prefijo. |
suffix |
El contenedor del sufijo. |
calendar-icon |
El contenedor del icono de calendario para el estado cerrado. |
calendar-icon-start |
El envoltorio del icono de calendario para el estado cerrado de la entrada de inicio (dos entradas). |
calendar-icon-end |
El contenedor de iconos de calendario para el estado cerrado de la entrada final (dos entradas). |
calendar-icon-open |
El contenedor de iconos de calendario para el estado abierto. |
calendar-icon-open-start |
El envoltorio del icono de calendario para el estado abierto de la entrada de inicio (dos entradas). |
calendar-icon-open-end |
El contenedor de iconos de calendario para el estado abierto de la entrada final (dos entradas). |
clear-icon |
El envoltorio de icono transparente (entrada única). |
clear-icon-start |
El envoltorio de icono borrar para la entrada de inicio (dos entradas). |
clear-icon-end |
El envoltorio de icono borrado para la entrada final (dos entradas). |
actions |
El contenedor de acciones. |
helper-text |
El contenedor de texto auxiliar que representa el contenido debajo de la entrada de destino. |
igc-date-range-picker::part(label) {
color: var(--ig-gray-600);
}
igc-date-range-picker::part(calendar-icon-start),
igc-date-range-picker::part(calendar-icon-end) {
background-color: var(--ig-primary-500);
color: var(--ig-primary-500-contrast);
}
igc-date-range-picker::part(calendar-icon-open-start),
igc-date-range-picker::part(calendar-icon-open-end) {
background-color: var(--ig-primary-700);
color: var(--ig-primary-700-contrast);
}
igc-date-range-picker::part(clear-icon-start),
igc-date-range-picker::part(clear-icon-end) {
background-color: var(--ig-error-500);
color: var(--ig-error-500-contrast);
}