Ora HTML: formato 24 ore, min, max, step e secondi

HTML input type="time" accetta un'ora del giorno. Anche se l'interfaccia mostra AM/PM, il valore è generalmente una stringa in formato 24 ore come 09:30, o 13:10:20 quando sono inclusi i secondi. min/max impostano i limiti, e step imposta gli intervalli in secondi.

Distingui il formato di visualizzazione dal valore

L'interfaccia di input varia in base al sistema operativo, al browser e alla lingua dell'utente. Non aspettarti che ogni menu a tendina o selettore abbia lo stesso aspetto. Inserisci una stringa valida come 13:30 nel valore iniziale, non un testo di visualizzazione localizzato come 1:30 PM. Imposta il valore iniziale con l'attributo value e leggi la selezione corrente dell'utente attraverso input.value.

Un valore temporale non ha data né fuso orario. Non può dirti se le 9:00 significano Seoul o un'altra località. Per una prenotazione che identifica un istante reale, raccogli anche la data e il fuso orario di riferimento e interpretali in modo coerente sul server. Per una durata come 90 minuti, scegli un formato appropriato come un conteggio numerico di minuti invece di riutilizzare un controllo dell'orario.

Imposta limiti e intervalli

La base è un min valido, altrimenti l’attributo HTML value valido, oppure 00:00:00 se entrambi mancano. Per min="09:00" step="900", 09:00, 09:15 e 09:30 sono validi, ma 09:10 non è compatibile. Questo non determina slot di prenotazione disponibili o giorni chiusi; implementare le regole del servizio separatamente.

Esempio completo: intervalli di 15 minuti e secondi

Salva questo codice come time.html e aprilo in un browser. Non è necessario alcun server per verificare la validazione e i valori inviati. Il secondo input utilizza esplicitamente step="1" per consentire i secondi.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Intervalli orari e secondi</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>Scegli un orario</h1>
  <form id="demo">
    <label for="meeting">Riunione (09:00–18:00, passi di 15 minuti)</label>
    <input id="meeting" name="meeting" type="time"
      min="09:00" max="18:00" step="900" value="09:30" required>
    <label for="checkpoint">Controllo (13:00–15:00, passi di un secondo)</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">Mostra valori inviati</button>
      <button type="reset">Ripristina</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. Invia inizialmente: meeting è 09:30 e checkpoint è 13:10:20. L'output è in formato 24 ore anche se l'interfaccia utente utilizza AM/PM.
2. Imposta l'orario della riunione alle 08:45 per far fallire la validazione dell'intervallo. Le 09:10 rientrano nell'intervallo ma non rispettano l'incremento di 15 minuti. Le 09:45 vengono inviate con successo.
3. Cancella completamente l'orario della riunione e invia per verificare la validazione obbligatoria. Ripristina un orario valido, poi modifica i secondi nel secondo input per confrontare l'output a livello di secondi.
4. Modifica solo il checkpoint da step="1" a step="60" e riapri il file. L'orario iniziale 13:10:20 è di 20 secondi fuori dai passi di un minuto da 13:00:00 ed è invalido. Ripristina successivamente il passo a 1.
5. Il ripristino reimposta la riunione alle 09:30 e il checkpoint alle 13:10:20.

Intervalli che attraversano la mezzanotte e validazione del server

Gli input di orario possono esprimere un intervallo che attraversa la mezzanotte. Ad esempio, min="22:00" max="02:00" significa dalle 22:00 fino a mezzanotte e alle 2:00. Non si tratta di un intervallo contenente date effettive, quindi non seleziona automaticamente la data del giorno successivo. Verifica il supporto per questa convalida nei browser di destinazione e implementa le stesse regole sul server.

Il selettore e i messaggi di convalida del browser non sostituiscono la convalida del server. Il server deve verificare il formato, l'intervallo e il passo della stringa ricevuta e combinarlo con la data richiesta, il fuso orario e la disponibilità delle prenotazioni. %3A in un URL GET è due punti codificati; l'analisi normale del valore del modulo restituisce una stringa come 09:30.

Se serve anche una data, consulta i valori e i limiti di date. Per i formati orari e gli attributi, consulta il riferimento MDN per time.