Hora HTML: formato de 24 horas, min, max, step y segundos

HTML input type="time" acepta una hora del día. Incluso si la interfaz muestra AM/PM, el valor generalmente es una cadena de 24 horas, como 09:30, o 13:10:20 cuando se incluyen los segundos. min/max establecen límites, y step establece intervalos en segundos.

Distinguir el formato de visualización del valor

La interfaz de usuario de entrada varía según el sistema operativo, el navegador y el idioma del usuario. No espere que cada menú desplegable o selector se vea igual. Ponga una cadena válida como 13:30 en el valor inicial, no un texto de visualización localizado como 1:30 PM. Establezca el valor inicial con el atributo value y lea la selección actual del usuario a través de input.value.

Un valor de hora no tiene fecha ni zona horaria. No puede indicarle si las 9 a.m. significan Seúl u otra ubicación. Para una reserva que identifique un instante real, recopile también la fecha y la zona horaria de referencia e interprételas de manera coherente en el servidor. Para una duración como 90 minutos, elija un formato adecuado como un conteo numérico de minutos en lugar de reutilizar un control de hora del día.

Establezca límites e intervalos

La base es un min válido; si falta, el atributo HTML value válido; y si faltan ambos, 00:00:00. Para min="09:00" step="900", 09:00, 09:15 y 09:30 son válidos, pero 09:10 no encaja. Esto no determina los espacios de reserva disponibles ni los días cerrados; implemente las reglas del servicio por separado.

Ejemplo completo: intervalos de 15 minutos y segundos

Guarde este código como time.html y ábralo en un navegador. No se necesita servidor para verificar la validación y los valores enviados. La segunda entrada usa explícitamente step="1" para permitir segundos.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rangos horarios y segundos</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 16px 0 6px; }
    input { max-width: 100%; box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Elige una hora</h1>
  <form id="demo">
    <label for="meeting">Reunión (09:00–18:00, pasos de 15 minutos)</label>
    <input id="meeting" name="meeting" type="time"
      min="09:00" max="18:00" step="900" value="09:30" required>
    <label for="checkpoint">Revisión (13:00–15:00, pasos de un segundo)</label>
    <input id="checkpoint" name="checkpoint" type="time"
      min="13:00:00" max="15:00:00" step="1" value="13:10:20" required>
    <p><button type="submit">Mostrar valores enviados</button>
      <button type="reset">Restablecer</button></p>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('input', () => { result.textContent = ''; });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Envía inicialmente: meeting es 09:30 y checkpoint es 13:10:20. La salida está en formato de 24 horas incluso si la interfaz de usuario usa AM/PM.
2. Establezca la hora de la reunión a 08:45 para que falle la validación del rango. 09:10 está dentro del rango pero falla en el paso de 15 minutos. 09:45 se envía correctamente.
3. Borre completamente la hora de la reunión y envíe para verificar la validación requerida. Restaure una hora válida, luego cambie los segundos en el segundo campo para comparar la salida a nivel de segundos.
4. Cambie solo el step="1" del punto de control a step="60" y vuelva a abrir el archivo. El inicial 13:10:20 está 20 segundos fuera de los pasos de un minuto desde 13:00:00 y es inválido. Restaure el paso a 1 después.
5. Restablecer restaura la reunión a 09:30 y el punto de control a 13:10:20.

Rangos a través de la medianoche y validación del servidor

Las entradas de tiempo pueden expresar un rango que cruce la medianoche. Por ejemplo, min="22:00" max="02:00" significa de 10 p.m. hasta la medianoche y hasta las 2 a.m. No es un intervalo que contenga fechas reales, por lo que no selecciona automáticamente la fecha del día siguiente. Verifique el soporte para esta validación en sus navegadores objetivo e implemente las mismas reglas en el servidor.

El selector y los mensajes de validación del navegador no sustituyen la validación del servidor. El servidor debe comprobar el formato, el rango y el paso de la cadena recibida, y combinarlo con la fecha requerida, la zona horaria y la disponibilidad de reservas. %3A en una URL GET es un dos puntos codificado; el análisis del valor del formulario normalmente produce una cadena como 09:30.

Si también necesitas una fecha, consulta los valores y límites de date. Para los formatos horarios y atributos, consulta la referencia de time en MDN.