Fecha HTML: value, min, max, step y formato
HTML <input type="date"> proporciona un control para año, mes y día. Su apariencia en el calendario y el orden mostrado pueden variar según el navegador y la configuración regional, pero el valor y los valores enviados están normalizados a YYYY-MM-DD. No incluyen hora ni zona horaria.
Establecer una fecha inicial y un rango permitido
Utilice value para la fecha inicial y min/max para las fechas permitidas más tempranas y más tardías. Ambos límites están incluidos. Los atributos necesitan cadenas de fecha válidas en lugar de texto de visualización localizado como “20 de mayo de 2030.” Valores mínimos o máximos no válidos pueden no imponer la restricción deseada.
name es el nombre del campo enviado y id asocia la etiqueta. Use required para la entrada obligatoria. Un rango no hace que todos los navegadores impidan la entrada de fechas de la misma manera; una fecha fuera del rango ingresada directamente falla la validación de la restricción.
Ejemplo completo: inspeccione la cadena de fecha y la validez
Guarda el siguiente documento como date-demo.html y ábrelo en un navegador. Muestra una fecha seleccionada dentro de mayo de 2030 para práctica, sin hacer una reserva ni enviar datos a un servidor.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comprobar valores de fecha</title>
</head>
<body>
<h1>Práctica de fecha de visita</h1>
<form id="demo">
<label for="visit">Fecha de visita (mayo de 2030, obligatoria)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">Mostrar valor</button>
<button type="reset">Restablecer</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Envía la fecha inicial para mostrar:
visit = 2030-05-20 - Elige otra fecha de mayo y envíala para mostrar su cadena de fecha. Una fecha fuera del rango es bloqueada por la validación de min/max.
- Borra la fecha y envía: la validación obligatoria lo bloquea. Restaurar vuelve al 20 de mayo.
La unidad step es días y su valor predeterminado es 1. Cambie solo el paso a 7 en el ejemplo: el 1 de mayo, la fecha mínima, se convierte en la base, así que el 1, 8, 15, 22 y 29 de mayo encajan en el intervalo. El valor inicial del 20 de mayo ya no encaja. Compare una selección válida del 8 de mayo y luego restaure el paso a 1 para permitir todos los días. Un solo ajuste de paso no implementa un calendario laboral con fines de semana o días festivos.
Formatos de visualización, zonas horarias y validación en el servidor
No ponga barras o cadenas localizadas en el valor para cambiar el selector de fechas específico de la localidad. Si solo necesita una fecha de calendario, tratarla como una cadena evita conversiones innecesarias de zona horaria. Los datos que también requieren hora necesitan más que solo la fecha y una política de zona horaria separada.
Controle el ancho con CSS en lugar de un atributo de tamaño. Proporcione una etiqueta y una explicación del rango, y valide en el servidor las fechas reales, los años bisiestos, los rangos y la disponibilidad según las reglas de la aplicación para controles no compatibles o solicitudes que eviten las verificaciones del navegador. Seleccionar una fecha no reserva un lugar ni confirma la disponibilidad actual de plazas. La referencia de entrada de fecha MDN explica las reglas de los atributos.
