Calendar picker
Un calendario interactivo que te permite elegir una o varias fechas fácilmente.
Seleccionaste:27 mar 2026
Ocultar presets
Selecciona una fecha
Rango de Años Personalizado
Seleccionaste:03 mar 2025
Seleccion individual
Seleccionaste:27 mar 2026
Selección Múltiple
Rango:06 ago 2025, 14 ago 2025, 18 ago 2025
Selección de Rango
Rango:04 ago 2025 - 14 ago 2025
Deshabilitar todas las fechas
Selecciona una fecha
Deshabilitar una fecha especifica
Selecciona una fecha
Deshabilitar lista de fechas
Seleccionaste:22 jul 2025
Deshabilitar fechas previas de una fecha especifica
Seleccionaste:22 jul 2025
Deshabilitar fechas posteriores de una fecha especifica
Seleccionaste:22 jul 2025
Deshabilitar dias de la semana
Deshabilita días específicos de la semana de forma permanente. Esto es especialmente útil cuando necesites restringir la selección de fechas a ciertos días.
Mapeo de días de la semana:
0 = Domingo
1 = Lunes
2 = Martes
3 = Miércoles
4 = Jueves
5 = Viernes
6 = SábadoSelecciona una fecha
Deshabilitar fechas de forma dinámica
La prop disabled acepta una función que permite deshabilitar fechas de forma dinámica. Esta función recibe cada fecha del calendario y debe retornar true para deshabilitarla.
Selecciona una fecha
Configuración de Dirección
Selecciona una fecha
Calendario Responsivo
Selecciona una fecha
Ejemplos
Calendario de reservas
Reservas Existentes
UID: 39d2afa910
10 ene 2024
15 ene 2024
Props
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
mode | single | multiple | range | - | Modo de selección del calendario |
date | Date | Date[] | null | - | Fecha(s) seleccionada(s) según el modo (estado controlado) |
defaultDate | Date | Date[] | null | - | Fecha(s) inicial(es) cuando no se controla el estado |
onDateChange | (date: Date | Date[] | null) => void | - | Callback cuando se selecciona una fecha |
disabled | boolean | Date | Date[] | { from: Date; to: Date } | { before: Date } | { after: Date } | { dayOfWeek: number[] } | ((date: Date) => boolean) | - | Configuración para deshabilitar fechas específicas |
direction | horizontal | vertical | - | Dirección de disposición del calendario |
hidePresets | boolean | - | Ocultar los presets de selección de fechas |
startRangeYear | number | - | Año inicial para el rango de años seleccionables |
endRangeYear | number | - | Año final para el rango de años seleccionables |
className | string | - | Clases CSS adicionales para el contenedor |