Curso HTML 9.4 Inputs de fecha y tiempo (date, time, datetime-local, month, week)

Inputs de fecha y tiempo en HTML5

HTML5 introdujo varios tipos de controles <input> dedicados a la gestión de fechas y horas en formularios:

• date: fecha (año, mes, día).
• time: hora (horas, minutos, opcionalmente segundos).
• datetime-local: fecha y hora local combinadas (sin zona horaria).
• month: año y mes.
• week: año y semana ISO.

Estos controles presentan al usuario un selector nativo (date-picker, time-picker) y facilitan la validación automática del formato.

Resumen de atributos comunes

1. Input type=’date’

Este control acepta fechas en formato YYYY-MM-DD. Los navegadores modernos ofrecen un calendario emergente.

<input type='date'
       id='fechaReserva'
       name='fechaReserva'
       value='2024-06-15'    
       min='2024-01-01'      
       max='2024-12-31'      
       required>
  

Si el navegador no soporta type='date' se mostrará un campo de texto. Se recomienda usar un polyfill.

2. Input type=’time’

Control para horas y minutos (y opcionalmente segundos) en formato HH:MM o HH:MM:SS. Por defecto el step es 60 (segundos).

<input type='time'
       id='horaInicio'
       name='horaInicio'
       value='08:30'       
       min='06:00'         
       max='22:00'         
       step='900'          
       required>
  

Use step='1' para permitir segundos, step='0.001' para milisegundos.

3. Input type=’datetime-local’

Combina fecha y hora local sin especificar zona horaria. Formato YYYY-MM-DDThh:mm (ej: 2024-06-15T14:30).

<input type='datetime-local'
       id='fechaHoraEvento'
       name='fechaHoraEvento'
       value='2024-06-15T14:30'  
       min='2024-06-01T08:00'    
       max='2024-06-30T20:00'
       required>
  

Para manejar zonas horarias, debe procesarse en el servidor o usar librerías JavaScript (por ejemplo Intl.DateTimeFormat).

4. Input type=’month’

Selector de mes y año, formato YYYY-MM. Solo permite seleccionar mes completo.

<input type='month'
       id='mesPlan'
       name='mesPlan'
       value='2024-06'
       min='2024-01'
       max='2024-12'>
  

5. Input type=’week’

Selector de semana ISO con año, formato YYYY-Www (por ejemplo 2024-W24).

<input type='week'
       id='semanaInforme'
       name='semanaInforme'
       value='2024-W24'
       min='2024-W01'
       max='2024-W52'>
  

Validación y JavaScript

Puede usar la API de validación de formularios:

<script>
  const inputDate = document.getElementById('fechaReserva');
  inputDate.addEventListener('input', ()=> {
    if (!inputDate.checkValidity()) {
      console.warn(inputDate.validationMessage);
    }
  });
</script>
  

También podemos formatear y manipular valores con Date en JavaScript:

<script>
  // Convertir valor date a objeto Date
  const fecha = new Date(document.getElementById('fechaReserva').value);
  console.log(fecha.toLocaleDateString('es-ES', { weekday:'long'}));
</script>
  

Compatibilidad y recomendaciones

• Chrome, Edge, Safari y Firefox soportan la mayoría de estos tipos.
• En navegadores sin soporte se renderiza un campo text, conviene usar un polyfill.
• Siempre especifique min y max para evitar entradas fuera de rango.
• Use el atributo step para controlar la granularidad de selección.

Conclusión

Los nuevos tipos de <input> simplifican la captura y validación de datos temporales. Aprovechando atributos nativos y la API de validación se mejora la experiencia de usuario y se reduce la complejidad del código.