Props

PropTypeDefaultDescription
value{ start: Date | null; end: Date | null }—Valor del rango de fechas seleccionado
onChange(value: { start: Date | null; end: Date | null }) => void—Callback cuando el valor cambia
presetsDateRangePreset[]—Preajustes de rangos de fecha predefinidos
maxDaysnumber—Días máximos permitidos en el rango (inclusivo)
minDaysnumber—Días mínimos requeridos en el rango (inclusivo)
allowSingleDateInRangebooleantruePermitir un rango donde el inicio es igual al final
minDateDate—Fecha mínima seleccionable
maxDateDate—Fecha máxima seleccionable
localePartial<Locale>—Configuración de localización personalizada
initialMonthDate—Mes inicial mostrado
size"small" | "medium" | "large" | "x-large""medium"Tamaño del componente
weekStartsOnWeekDay"sunday"Primer día de la semana
isDateUnavailable(date: Date) => boolean—Marcar fechas como deshabilitadas
displayFormatstring—Formato de visualización personalizado (ej. "YYYY/MM/DD")
openboolean—Estado de apertura controlado
initialOpenboolean—Estado de apertura inicial (no controlado)
onOpenChange(open: boolean) => void—Callback cuando el estado de apertura cambia
requiredbooleanfalseDeshabilitar la limpieza del valor
showOutsideDaysbooleanfalseMostrar días de meses adyacentes
highlightDatesDate[]—Fechas a resaltar
shouldCloseOnSelectbooleanfalseAutoconfirmar cuando se selecciona la fecha final
numberOfMonthsnumber2Número de meses a mostrar
captionLayout"buttons" | "dropdown""buttons"Estilo de navegación del encabezado
fromYearnumber—Año de inicio para el desplegable
toYearnumber—Año de fin para el desplegable
disablePastbooleanfalseDeshabilitar fechas anteriores a hoy
disableFuturebooleanfalseDeshabilitar fechas posteriores a hoy
inlinebooleanfalseMostrar el calendario en línea (sin popup)
namestring—Nombre del input oculto para envío de formulario (fecha de inicio)
endNamestring—Nombre del input oculto para la fecha de fin (por defecto name-end)
placeholderstring—Texto del placeholder del disparador
hideHeaderbooleanfalseOcultar el encabezado de navegación
hideFooterbooleanfalseOcultar el pie de página de acciones

DateRangePreset

interface DateRangePreset {
  label: string;
  value: { start: Date; end: Date } | (() => { start: Date; end: Date });
}