LifeUI
1.53.2Date selector
Un componente que permite seleccionar fechas a través de un calendario.
Selección de rango
El DateSelector permite seleccionar un rango de fechas cuando se configura con calendarMode="range".
Selección múltiple
Puedes permitir que los usuarios seleccionen múltiples fechas usando calendarMode="multiple".
Deshabilitar fechas
Puedes deshabilitar fechas específicas usando la prop disabledDates equivalente a la prop disabled del Calendar.
Pocision de la ventana emergente
Envía la propiedad side al PopoverContent para cambiar la posición del popover.
Props
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
calendarMode | single | multiple | range | Sí | Modo de selección del calendario |
date | Date | Date[] | null | - | Fecha(s) seleccionada(s) según el modo (estado controlado) |
onDateChange | (date: Date | Date[] | null) => void | - | Callback cuando se selecciona una fecha |
defaultDate | Date | Date[] | null | - | Fecha(s) inicial(es) cuando no se controla el estado |
disabledDates | CalendarProps["disabled"] | - | Configuración para deshabilitar fechas específicas del Calendario |
startRangeYear | number | - | Año inicial para el rango de años seleccionables |
endRangeYear | number | - | Año final para el rango de años seleccionables |
side | top | right | bottom | left | - | Lado desde donde se posiciona el popover (solo en desktop) |
sideOffset | number | - | Distancia en píxeles desde el lado especificado |
align | start | center | end | - | Alineación del popover respecto al trigger (solo en desktop) |
alignOffset | number | - | Distancia en píxeles desde la alineación especificada |
mode | solid | outline | lighter | text | - | Estilo visual del botón (heredado de Button) |
colorPallete | ButtonProps["colorPallete"] | - | Color semántico del botón (heredado de Button) |
size | tiny | small | medium | large | xlarge | - | Tamaño del botón (heredado de Button) |
disabled | boolean | - | Si el botón está deshabilitado (heredado de Button) |
loading | boolean | - | Si el botón está en estado de carga (heredado de Button) |
children | ReactNode | Sí | Texto o contenido del botón que se muestra cuando no hay fecha seleccionada |
...rest | ComponentProps<"button"> | - | Todas las props adicionales del elemento HTML button |