<input type="time">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

<input>-Elemente des Typs time erstellen Eingabefelder, die darauf ausgelegt sind, dem Benutzer das einfache Eingeben einer Uhrzeit (Stunden und Minuten, und optional Sekunden) zu ermöglichen.

Obwohl das Erscheinungsbild der Benutzeroberfläche der Kontrolle vom Browser und Betriebssystem abhängig ist, sind die Funktionen dieselben. Der Wert ist immer eine im 24-Stunden-Format HH:mm oder HH:mm:ss formatierte Uhrzeit mit führenden Nullen, unabhängig vom Eingabeformat der Benutzeroberfläche.

Probieren Sie es aus

<label for="appointment">Choose a time for your meeting:</label>

<input
  type="time"
  id="appointment"
  name="appointment"
  min="09:00"
  max="18:00"
  required />

<small>Office hours are 9am to 6pm</small>
label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Das value-Attribut festlegen

Sie können einen Standardwert für die Eingabe festlegen, indem Sie beim Erstellen des <input>-Elements einen gültigen Zeitwert im value Attribut einschließen, wie folgt:

html
<label for="appointment-time">Choose an appointment time: </label>
<input
  id="appointment-time"
  type="time"
  name="appointment-time"
  value="13:30" />

Den Wert mit JavaScript festlegen

Sie können den Zeitwert auch in JavaScript mit der HTMLInputElement value-Eigenschaft abrufen und festlegen, zum Beispiel:

js
const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";

Format des Zeitwerts

Der value des time-Eingabefelds ist immer im 24-Stunden-Format mit führenden Nullen: HH:mm, unabhängig vom Eingabeformat, das wahrscheinlich basierend auf der Benutzersprache (oder vom User-Agent) ausgewählt wird. Wenn die Zeit Sekunden enthält (siehe Verwendung des step-Attributs), ist das Format immer HH:mm:ss. Sie können mehr über das Format der Zeitwerte, die von diesem Eingabetyp verwendet werden, in Zeitwerte erfahren.

In diesem Beispiel können Sie den Wert des Zeiteingabefelds sehen, indem Sie eine Zeit eingeben und anschließend überprüfen, wie sich der Wert verändert.

Zuerst ein Blick auf das HTML. Wir fügen eine Beschriftung und eine Eingabe hinzu und ergänzen ein <p>-Element mit einem <span>, um den Wert der time-Eingabe anzuzeigen:

html
<form>
  <label for="startTime">Start time: </label>
  <input type="time" id="startTime" />
  <p>
    Value of the <code>time</code> input:
    <code>"<span id="value">n/a</span>"</code>.
  </p>
</form>

Der JavaScript-Code fügt dem Zeiteingabefeld Code hinzu, um auf das input-Ereignis zu warten, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. Wenn dies passiert, werden die Inhalte des <span> durch den neuen Wert des Eingabeelements ersetzt.

js
const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener(
  "input",
  () => {
    valueSpan.innerText = startTime.value;
  },
  false,
);

Wenn ein Formular, das ein time-Eingabefeld enthält, übermittelt wird, wird der Wert kodiert, bevor er in die Formulardaten aufgenommen wird. Der Dateneintrag des Formulars für ein Zeiteingabefeld wird immer in der Form name=HH%3Amm oder name=HH%3Amm%3Ass sein, wenn Sekunden enthalten sind (siehe Verwendung des step-Attributs).

Zusätzliche Attribute

Zusätzlich zu den Attributen, die allen <input>-Elementen gemeinsam sind, bieten time-Eingaben die folgenden Attribute.

Hinweis: Im Gegensatz zu vielen Datentypen haben Zeitwerte einen periodischen Bereich, was bedeutet, dass die Werte den höchstmöglichen Wert erreichen und dann wieder am Anfang beginnen. Zum Beispiel bedeutet das Festlegen eines min von 14:00 und eines max von 2:00, dass die erlaubten Zeitwerte bei 14:00 Uhr beginnen, durch Mitternacht bis zum nächsten Tag laufen und um 2:00 Uhr enden. Weitere Informationen finden Sie im Abschnitt min und max über Mitternacht setzen in diesem Artikel.

list

Die Werte des list-Attributs sind die id eines <datalist>-Elements, das im selben Dokument vorhanden ist. Das <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, sind nicht in den vorgeschlagenen Optionen enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

max

Eine Zeichenkette, die die späteste akzeptierte Zeit angibt, im selben Zeitwertformat, wie oben beschrieben. Wenn die angegebene Zeichenkette keine gültige Zeit ist, wird kein Maximalwert festgelegt.

min

Eine Zeichenkette, die die früheste akzeptierte Zeit angibt, im Zeitwertformat, wie vorher beschrieben. Wenn der angegebene Wert keine gültige Zeitzeichenkette ist, wird kein Minimalwert festgelegt.

readonly

Ein boolesches Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin direkt durch JavaScript-Code, der die HTMLInputElement value-Eigenschaft setzt, geändert werden.

Hinweis: Da ein schreibgeschütztes Feld keinen Wert haben kann, hat required keine Auswirkung auf Eingaben mit dem readonly-Attribut.

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Schritt-Basiswert (min, falls angegeben, sonst value und ein geeigneter Standardwert, falls keiner dieser Werte angegeben ist) entsprechen, sind gültig.

Ein Zeichenfolgenwert von any bedeutet, dass keine Schrittweite impliziert ist, und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max).

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittkonfiguration entsprechen, kann der User-Agent den nächstgelegenen gültigen Wert runden, wobei Zahlen in positiver Richtung bevorzugt werden, wenn es zwei gleich nah beieinander liegende Optionen gibt.

Für time-Eingaben wird der Wert von step in Sekunden angegeben, mit einem Skalierungsfaktor von 1000 (da der zugrunde liegende numerische Wert in Millisekunden angegeben wird). Der Standardwert von step ist 60, was 60 Sekunden (oder 1 Minute oder 60.000 Millisekunden) angibt.

Wenn any als Wert für step gesetzt ist, wird der Standardwert von 60 Sekunden verwendet, und der Sekundenwert wird in der Benutzeroberfläche nicht angezeigt.

Verwendung von Zeiteingaben

Grundlegende Verwendung von Zeit

Die grundlegendste Verwendung von <input type="time"> umfasst eine einfache Kombination von <input> und <label>-Element, wie unten gezeigt:

html
<form>
  <label for="appointment-time">Choose an appointment time: </label>
  <input id="appointment-time" type="time" name="appointment-time" />
</form>

Eingabegröße steuern

<input type="time"> unterstützt keine Formulargrößenattribute wie size, da Zeiten immer in etwa gleich lang sind. Für Größenanforderungen müssen Sie auf CSS zurückgreifen.

Verwendung des step-Attributs

Sie können das step-Attribut verwenden, um die Menge an Zeit zu variieren, die bei jedem Inkrementieren oder Dekrementieren gesprungen wird (zum Beispiel, damit die Zeit beim Klicken auf die kleinen Pfeil-Widgets um 10 Minuten wechselt).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, um die Sie inkrementieren möchten; der Standardwert ist 60 Sekunden. Mit diesem Standardwert zeigen die meisten User-Agent-Zeit-Benutzeroberflächen Stunden und Minuten, aber keine Sekunden an. Das Einschließen des step-Attributs mit einem beliebigen numerischen Wert, der nicht durch 60 teilbar ist, fügt der Benutzeroberfläche Sekunden hinzu, es sei denn, der min- oder max-Wert hat die Anzeige der Sekunden bereits verursacht.

html
<form>
  <label for="appointment-time">Choose an appointment time: </label>
  <input id="appointment-time" type="time" name="appointment-time" step="2" />
</form>

Um Minuten oder Stunden als Schritt anzugeben, geben Sie die Anzahl der Minuten oder Stunden in Sekunden an, wie zum Beispiel 120 für 2 Minuten oder 7200 für 2 Stunden.

Validierung

Standardmäßig wendet <input type="time"> keine Validierung auf eingegebene Werte an, abgesehen davon, dass die Benutzeroberfläche des User-Agent im Allgemeinen nicht zulässt, dass Sie etwas anderes als einen Zeitwert eingeben. Dies ist hilfreich, aber Sie können sich nicht vollständig auf den Wert als korrekte Zeitzeichenfolge verlassen, da es sich um eine leere Zeichenfolge ("") handeln könnte, was zulässig ist.

Maximale und minimale Zeiten festlegen

Sie können die min und max-Attribute verwenden, um die gültigen Zeiten einzuschränken, die der Benutzer wählen kann. Im folgenden Beispiel legen wir eine Mindestzeit von 12:00 und eine Höchstzeit von 18:00 fest:

html
<form>
  <label for="appointment-time">
    Choose an appointment time (opening hours 12:00 to 18:00):
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00" />
  <span class="validity"></span>
</form>

Hier ist das CSS, das im obigen Beispiel verwendet wird. Hier nutzen wir die :valid und :invalid-CSS-Eigenschaften, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir fügen ein Symbol als generiertes Inhaltsicon auf einem <span> neben der Eingabe hinzu.

css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Das Ergebnis hier ist, dass:

  • Nur Zeiten zwischen 12:00 und 18:00 als gültig angesehen werden; Zeiten außerhalb dieses Bereichs werden als ungültig gekennzeichnet.

Min und max über Mitternacht setzen

Durch das Setzen eines min-Attributs, das größer ist als das max-Attribut, wird der gültige Zeitbereich über Mitternacht gewickelt, um einen gültigen Zeitbereich zu erzeugen. Diese Funktionalität wird von keinem anderen Eingabetyp unterstützt.

js
const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";

if (input.validity.valid && input.type === "time") {
  // <input type=time> reversed range supported
} else {
  // <input type=time> reversed range unsupported
}

Zeiten erforderlich machen

Darüber hinaus können Sie das required-Attribut verwenden, um die Eingabe der Zeit verpflichtend zu machen. Browser zeigen eine Fehlermeldung an, wenn Sie versuchen, eine Zeit einzugeben, die außerhalb der festgelegten Grenzen liegt, oder ein leeres Zeitfeld einzugeben.

Schauen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstzeiten festgelegt und auch das Feld als erforderlich festgelegt:

html
<form>
  <div>
    <label for="appointment-time">
      Choose an appointment time (opening hours 12:00 to 18:00):
    </label>
    <input
      id="appointment-time"
      type="time"
      name="appointment-time"
      min="12:00"
      max="18:00"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Wenn Sie versuchen, das Formular mit einer unvollständigen Zeit (oder mit einer Zeit außerhalb der festgelegten Grenzen) abzusenden, zeigt der Browser einen Fehler an. Versuchen Sie, jetzt mit dem Beispiel zu spielen:

Warnung: Die HTML-Formularvalidierung ist kein Ersatz für Skripte, die sicherstellen, dass die eingegebenen Daten im richtigen Format vorliegen. Es ist viel zu einfach, Anpassungen am HTML vorzunehmen, die es ermöglichen, die Validierung zu umgehen oder sie vollständig zu entfernen. Es ist auch möglich, dass jemand Ihr HTML vollständig umgeht und die Daten direkt an Ihren Server sendet. Wenn Ihr serverseitiger Code die empfangenen Daten nicht validiert, könnte es zu Katastrophen kommen, wenn unsachgemäß formatierte Daten übermittelt werden (oder Daten, die zu groß sind, vom falschen Typ sind usw.).

Beispiele

In diesem Beispiel erstellen wir ein Schnittstellenelement zur Auswahl der Zeit unter Verwendung des nativen Pickers, der mit <input type="time"> erstellt wird:

HTML

html
<form>
  <label for="appointment-time">
    Choose an appointment time (opening hours 12:00 to 18:00):
  </label>
  <input
    id="appointment-time"
    type="time"
    name="appointment-time"
    min="12:00"
    max="18:00"
    required />
  <span class="validity"></span>
</form>

CSS

css
input[type="time"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Ergebnis

Technische Zusammenfassung

Wert Eine Zeichenkette, die eine Zeit darstellt, oder leer.
Ereignisse [`change`](/de/docs/Web/API/HTMLElement/change_event) und [`input`](/de/docs/Web/API/Element/input_event)
Unterstützte allgemeine Attribute autocomplete, list, readonly, step
IDL-Attribute list, value, valueAsDate, valueAsNumber
DOM-Schnittstelle

[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)

Methoden [`select()`](/de/docs/Web/API/HTMLInputElement/select), [`stepDown()`](/de/docs/Web/API/HTMLInputElement/stepDown), und [`stepUp()`](/de/docs/Web/API/HTMLInputElement/stepUp).
Implizite ARIA-Rolle keine entsprechende Rolle

Spezifikationen

Specification
HTML
# time-state-(type=time)

Browser-Kompatibilität

Siehe auch