DatePicker Selector de Fecha
Introducción
Un control de formulario interactivo que combina un campo de entrada de texto con una superposición de calendario emergente. Admite selectores de fecha única, selecciones de rango de fechas, alternancias de multiselección, límites de calendario personalizados, encabezados de días de la semana localizados y navegación por teclado.
El DatePicker está totalmente integrado como un bloque datePicker en el Page Builder, lo que permite a los gestores de contenido y desarrolladores definir etiquetas de texto, formato de marcador de posición, modos de selección y temas de color de acento directamente dentro de las plantillas de página de Sveltia CMS.
Uso
Estas configuraciones representan exactamente cómo se construyen los elementos de bloque del page-builder.
1. Selector de fecha única (no controlado / estándar)
Nuestro diseño estándar de selector de fecha que permite a los usuarios seleccionar una fecha específica del menú desplegable del calendario. Útil para formularios, registros o reservas programadas.
{
"type": "datePicker",
"label": "Choose Date",
"selectionMode": "single",
"placeholder": "YYYY-MM-DD",
"colorPalette": "blue",
"interactive": true
}
2. Selector de rango de viaje (calendario delimitado)
Restringe los límites del calendario seleccionable entre fechas específicas. Excelente para selecciones de vuelos, reservas de hoteles o ventanas contables. Establecer selectionMode en "range" renderiza entradas de inicio y fin.
{
"type": "datePicker",
"label": "Travel Dates",
"selectionMode": "range",
"min": "2026-01-01",
"max": "2026-12-31",
"colorPalette": "purple",
"interactive": true
}
Propiedades
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / Opciones admitidas |
|---|---|---|---|
Texto de etiqueta (label) | string | - | Texto de etiqueta descriptivo del formulario renderizado adyacente al campo de entrada de texto. |
Marcador de posición (placeholder) | string | "YYYY-MM-DD" | Texto de formato guía mostrado dentro del campo de entrada de texto cuando está vacío. |
Modo de selección (selectionMode) | select | "single" | Define cómo se recopilan las fechas. • "single" — Resuelve una sola fecha. • "range" — Resuelve un bloque de expansión (crea entradas dobles). • "multiple" — Alterna múltiples días independientes. |
Fecha mínima (min) | string | - | La fecha seleccionable más temprana en formato ISO YYYY-MM-DD. Las celdas anteriores están deshabilitadas. |
Fecha máxima (max) | string | - | La fecha seleccionable más tardía en formato ISO YYYY-MM-DD. |
Mostrar números de semana (showWeekNumbers) | boolean | false | Cuando es true, renderiza una columna de número de semana ISO-8601 a lo largo del borde izquierdo de la cuadrícula de días. |
Tema de color (colorPalette) | select | "blue" | Tema visual aplicado a días seleccionados, resaltados de hoy y límites activos. • Opciones: blue, green, red, purple, orange, amber, cyan, slate. |
Habilitar hidratación (interactive) | boolean | true | Cuando es true, hidrata el componente como una isla para manejar pop-ups de calendario y clics externos. |
Soporte de teclado y accesibilidad
Cuando el panel de superposición del calendario está abierto y el foco se dirige dentro, los usuarios pueden operar las selecciones completamente mediante teclas estándar del teclado:
- ← / → — Mover el foco a la celda del día anterior o siguiente.
- ↑ / ↓ — Mover el foco ±1 semana (7 días) verticalmente.
- PageUp / PageDown — Avanzar o retroceder la vista del calendario un mes completo.
- Shift+PageUp / Shift+PageDown — Avanzar o retroceder un año completo.
- Enter / Space — Seleccionar la celda de día enfocada activa y confirmar.
- Esc — Cerrar inmediatamente la superposición emergente y devolver el foco al campo de entrada del disparador.
En segundo plano, la cuadrícula de días utiliza paradas de foco tabIndex móviles para evitar tabular a través de cada día individual del calendario. Todas las cuadrículas de celdas anuncian descripciones semánticas correctas para lectores de pantalla (role="grid", aria-multiselectable, aria-current="date").