HTML Time Input: 24-Stunden-Werte, min, max, step und Sekunden

HTML input type="time" akzeptiert eine Tageszeit. Selbst wenn die Benutzeroberfläche AM/PM anzeigt, ist der Wert im Allgemeinen eine 24-Stunden-Zeichenfolge wie 09:30 oder 13:10:20, wenn Sekunden enthalten sind. min/max legen Grenzen fest, und step legt Intervalle in Sekunden fest.

Unterscheiden Sie Anzeigeformat und Wert

Die Eingabe-Benutzeroberfläche variiert je nach Betriebssystem, Browser und Benutzersprache. Erwarten Sie nicht, dass jedes Dropdown-Menü oder Auswahlfeld gleich aussieht. Geben Sie einen gültigen String wie 13:30 als Anfangswert ein, nicht lokalisierten Anzeigetext wie 1:30 PM. Setzen Sie den Anfangswert über das value-Attribut und lesen Sie die aktuelle Benutzerauswahl über input.value.

Ein Zeitwert hat kein Datum oder keine Zeitzone. Er kann nicht sagen, ob 9 Uhr morgens Seoul oder einem anderen Ort entspricht. Für eine Buchung, die einen tatsächlichen Zeitpunkt identifiziert, erfassen Sie auch das Datum und die Referenzzeitzone und interpretieren Sie sie auf dem Server konsistent. Für eine Dauer wie 90 Minuten wählen Sie ein geeignetes Format wie eine numerische Minutenangabe, anstatt ein Zeit-vom-Tag-Steuerelement erneut zu verwenden.

Grenzen und Intervalle festlegen

Die Schrittbasis ist ein gültiger min-Wert, sonst das gültige HTML-Attribut value und andernfalls 00:00:00. Für min="09:00" step="900" sind 09:00, 09:15 und 09:30 gültig, aber 09:10 passt nicht. Dies bestimmt nicht die verfügbaren Buchungszeiten oder geschlossenen Tage; Dienstregeln separat implementieren.

Vollständiges Beispiel: 15-Minuten-Intervalle und Sekunden

Speichern Sie diesen Code als time.html und öffnen Sie ihn in einem Browser. Kein Server wird benötigt, um Validierung und übermittelte Werte zu prüfen. Die zweite Eingabe verwendet explizit step="1", um Sekunden zuzulassen.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Zeitbereiche und Sekundeneingabe</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>Uhrzeit wählen</h1>
  <form id="demo">
    <label for="meeting">Besprechung (09:00–18:00, 15-Minuten-Schritte)</label>
    <input id="meeting" name="meeting" type="time"
      min="09:00" max="18:00" step="900" value="09:30" required>
    <label for="checkpoint">Prüfzeit (13:00–15:00, Sekundenschritte)</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">Formularwerte anzeigen</button>
      <button type="reset">Zurücksetzen</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. Initial übermitteln: meeting ist 09:30 und checkpoint ist 13:10:20. Die Ausgabe erfolgt im 24-Stunden-Format, selbst wenn die Benutzeroberfläche AM/PM verwendet.
2. Stellen Sie die Besprechungszeit auf 08:45, um an der Bereichsvalidierung zu scheitern. 09:10 liegt innerhalb des Bereichs, verstößt jedoch gegen das 15-Minuten-Intervall. 09:45 wird erfolgreich gesendet.
3. Löschen Sie die Besprechungszeit vollständig und senden Sie, um die erforderliche Validierung zu überprüfen. Stellen Sie eine gültige Zeit wieder her und ändern Sie dann die Sekunden im zweiten Eingabefeld, um die Ausgabe auf Sekundenebene zu vergleichen.
4. Ändern Sie nur den Checkpoint von step="1" zu step="60" und öffnen Sie die Datei erneut. Anfangs 13:10:20 weicht 20 Sekunden von den Ein-Minuten-Schritten ab, beginnend bei 13:00:00, und ist ungültig. Stellen Sie danach den Schritt auf 1 zurück.
5. Zurücksetzen stellt das Meeting auf 09:30 und den Checkpoint auf 13:10:20 wieder her.

Bereiche über Mitternacht und Server-Validierung

Zeiteingaben können einen Bereich über Mitternacht ausdrücken. Zum Beispiel bedeutet min="22:00" max="02:00" 22 Uhr bis Mitternacht bis 2 Uhr morgens. Es handelt sich nicht um ein Intervall mit tatsächlichen Daten, daher wird nicht automatisch das Datum des nächsten Tages ausgewählt. Überprüfen Sie die Unterstützung für diese Validierung in Ihren Zielbrowsern und implementieren Sie dieselben Regeln auf dem Server.

Die Auswahloberfläche oder Prüfmeldungen des Browsers ersetzen keine serverseitige Validierung. Der Server muss das Format, den Bereich und die Schritte der empfangenen Zeichenfolge überprüfen und sie mit dem erforderlichen Datum, der Zeitzone und der Buchungsverfügbarkeit kombinieren. %3A in einer GET-URL ist ein kodierter Doppelpunkt; das Parsen des Formularwertes ergibt normalerweise eine Zeichenfolge wie 09:30.

Wenn Sie auch ein Datum benötigen, lesen Sie die Datumswerte und Bereichsgrenzen von date. Zeitformate und Attribute erläutert die MDN-Referenz zum time-Input.