Selector de fecha (datepicker)
Un calendario sobre un campo de fecha nativo. El servidor envía <input type="date">, que ya tiene su propio selector y envía un valor ISO; en init un botón abre un diálogo de calendario con una rejilla manejable desde el teclado, navegación por mes y año, acciones de hoy y vaciar, y los límites de min y max. Los nombres de mes y de día salen de los datos de configuración regional del navegador, así que el mismo marcado se lee bien en cualquier idioma. En punteros gruesos se mantiene el selector nativo, porque ahí es la mejor herramienta.
<div class="iv-field iv-datepicker" data-iv-component="datepicker" data-iv-native="off" style="max-width: 22rem">
<label class="iv-label" for="d-start">Start date</label>
<input class="iv-input" type="date" id="d-start" name="start" min="2026-01-01" max="2026-12-31" value="2026-03-04" aria-describedby="d-start-help">
<p class="iv-field__help iv-u-m-0" id="d-start-help">Demo field: nothing is submitted or stored. Dates are limited to 2026, so days outside that year cannot be picked. Without JavaScript this is the browser date picker; with JavaScript it becomes the calendar below the field. This fixture sets <code>data-iv-native="off"</code> so the calendar shows on phones too, where the default would keep the native picker.</p>
</div>// data-iv-component="datepicker"
{
native: "off",
}Configuración regional y primer día de la semana
data-iv-locale elige el idioma de los nombres y data-iv-first-day la primera columna; por defecto ambos siguen el idioma del documento. Los textos de los botones son opciones, así que también se pueden traducir.
<div class="iv-stack iv-u-gap-6" style="max-width: 22rem">
<div class="iv-field iv-datepicker" data-iv-component="datepicker" data-iv-native="off" data-iv-locale="es-ES" data-iv-first-day="1" data-iv-open-text="Abrir calendario" data-iv-prev-text="Mes anterior" data-iv-next-text="Mes siguiente" data-iv-today-text="Hoy" data-iv-clear-text="Borrar" data-iv-dialog-text="Elige una fecha">
<label class="iv-label" for="d-es">Fecha de entrada</label>
<input class="iv-input" type="date" id="d-es" name="es" value="2026-03-04" aria-describedby="d-es-help">
<p class="iv-field__help iv-u-m-0" id="d-es-help">Spanish calendar: month and day names come from <code>Intl</code> with <code>data-iv-locale="es-ES"</code>, the week starts on Monday and every button label is translated through options.</p>
</div>
<div class="iv-field iv-datepicker" data-iv-component="datepicker" data-iv-native="off" data-iv-locale="en-US" data-iv-first-day="0">
<label class="iv-label" for="d-us">Check-in date</label>
<input class="iv-input" type="date" id="d-us" name="us" value="2026-03-04" aria-describedby="d-us-help">
<p class="iv-field__help iv-u-m-0" id="d-us-help">American calendar: same component with <code>data-iv-locale="en-US"</code> and the week starting on Sunday. Demo fields: nothing is submitted or stored.</p>
</div>
</div>// data-iv-component="datepicker"
{
native: "off",
locale: "es-ES",
firstDay: 1,
openText: "Abrir calendario",
prevText: "Mes anterior",
nextText: "Mes siguiente",
todayText: "Hoy",
clearText: "Borrar",
dialogText: "Elige una fecha",
}Opciones
| Opción | Atributo | Por defecto | Efecto |
|---|---|---|---|
native | data-iv-native | auto | auto mantiene el selector nativo en punteros gruesos; on siempre; off muestra siempre el calendario. |
locale | data-iv-locale | idioma del documento | Etiqueta BCP 47 para los nombres de mes y de día. |
firstDay | data-iv-first-day | -1 | 0 (domingo) a 6; -1 sigue la configuración regional, o lunes cuando el navegador no lo sabe. |
openText, prevText, nextText, todayText, clearText, dialogText | data-iv-open-text … | textos en inglés | Nombres accesibles y textos de los botones. |
Métodos y eventos
open(), close(), setValue(iso), clear(), destroy(); lectura de value, date e isOpen. Eventos: iv:open/iv:close (cancelables) y después iv:opened/iv:closed; iv:change (cancelable, detail.value, previousValue, date) y después iv:changed. El campo también recibe input y change.
Teclado y tecnología asistiva
Izquierda y Derecha mueven un día, Arriba y Abajo una semana, Inicio y Fin a los extremos de la semana, Re Pág y Av Pág un mes, con Mayús un año; Enter o Espacio seleccionan y cierran; Escape cierra y devuelve el foco al botón. La rejilla es una tabla real con una sola parada de tabulación, el diálogo no es modal y tiene nombre, los días desactivados son botones desactivados reales y el título del mes se anuncia cuando cambia.
Sin JavaScript
El campo de fecha nativo lo hace todo: escritura, el selector propio del navegador, min, max y el envío del formulario en formato ISO.
Errores frecuentes
- Leer o escribir el valor en un formato de presentación: el valor del campo es siempre
YYYY-MM-DD. - Forzar el calendario propio en el móvil: el nativo es más rápido y lo localiza el sistema.
- Rangos u horas: fuera de alcance; usa dos campos o un campo de hora.
Índice de clases
Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.
| Clase | Qué hace |
|---|---|
iv-datepicker__header | Cabecera del mes con los dos botones de navegación. |
iv-datepicker__footer | Fila con los botones de hoy y de limpiar. |
iv-datepicker__weekday | Día de la semana abreviado de la rejilla, tomado de Intl. |
iv-datepicker__icon | Glifo de calendario del disparador, dibujado con una máscara. |
iv-datepicker__day--today | Celda de hoy: un anillo, nunca solo color. |
iv-datepicker__day--outside | Día del mes anterior o del siguiente. |