<input type="time">

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

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

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

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

Der value des time-Eingabefelds liegt immer im 24-Stunden-Format mit führenden Nullen vor: HH:mm, unabhängig vom Eingabeformat, das wahrscheinlich basierend auf der Spracheinstellung des Benutzers (oder des Benutzeragents) ausgewählt wird. Wenn die Zeit Sekunden beinhaltet (siehe Verwendung des step-Attributes), ist das Format immer HH:mm:ss. Weitere Informationen über das Zeitformat, das von diesem Eingabetyp verwendet wird, finden Sie unter Time strings.

In diesem Beispiel können Sie den Wert der Zeiteingabe sehen, indem Sie eine Zeit eingeben und beobachten, wie sich der Wert danach ändert.

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

<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 der Zeiteingabe Code hinzu, um das input-Ereignis zu überwachen, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. Wenn dies geschieht, werden die Inhalte des <span> durch den neuen Wert des Eingabeelements ersetzt.

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

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

Wenn ein Formular mit einer time-Eingabe gesendet wird, wird der Wert kodiert, bevor er in die Formulardaten aufgenommen wird. Der Dateneintrag eines Formulars für eine Zeiteingabe hat immer die Form name=HH%3Amm, oder name=HH%3Amm%3Ass, wenn Sekunden eingeschlossen sind (siehe Verwendung des step-Attributes).

Neben den Attributen, die allen <input>-Elementen gemeinsam sind, bieten time-Eingaben die folgenden Attribute.

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

Ein String, der die späteste zu akzeptierende Zeit angibt, angegeben im selben Zeitwertformat wie oben beschrieben. Wenn der angegebene String keine gültige Zeit ist, wird kein Höchstwert gesetzt.

Ein String, der die früheste zu akzeptierende Zeit angibt, angegeben im zuvor beschriebenen Zeitwertformat. Wenn der angegebene Wert kein gültiger Zeit-String ist, wird kein Mindestwert gesetzt.

Ein Boolean-Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch JavaScript-Code direkt per Setzen der value-Eigenschaft des HTMLInputElement geändert werden.

Das step-Attribut ist eine Zahl, die die Granularität spezifiziert, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Ausgangspunkt für das Stufen (min, falls angegeben, andernfalls value, und einem geeigneten Standardwert, falls keine dieser Optionen angegeben ist) entsprechen, sind gültig.

Ein String-Wert von any bedeutet, dass kein Stufen impliziert wird und jeglicher Wert erlaubt ist (vorbehaltlich anderer Einschränkungen, wie min und max).

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

Wenn any als Wert für step gesetzt ist, werden die standardmäßigen 60 Sekunden verwendet und der Sekundenwert wird nicht in der Benutzeroberfläche angezeigt.

Die grundlegendste Verwendung von <input type="time"> umfasst eine einfache Kombination aus <input> und <label>-Elementen, wie unten zu sehen:

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

<input type="time"> unterstützt keine Formgrößenattribute wie size, da Zeiten immer ungefähr gleich lang sind. Sie müssen hierfür auf CSS zurückgreifen.

Mit dem step-Attribut können Sie den Zeitabstand variieren, wann immer die Zeit erhöht oder verringert wird (zum Beispiel, damit sich die Zeit in 10-Minuten-Schritten bewegt, wenn Sie auf die kleinen Pfeilsymbole klicken).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, die Sie inkrementieren möchten; der Standardwert sind 60 Sekunden. Bei diesem Standard zeigt die Benutzeroberfläche der meisten Benutzeragenten Stunden und Minuten, aber keine Sekunden an. Das Hinzufügen des step-Attributs mit einem beliebigen numerischen Wert, der nicht durch 60 teilbar ist, fügt Sekunden in die Benutzeroberfläche ein, falls nicht bereits min oder max deren Sichtbarkeit verursacht haben.

<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 festzulegen, geben Sie die Anzahl der Minuten oder Stunden in Sekunden an, wie z.B. 120 für 2 Minuten oder 7200 für 2 Stunden.

Standardmäßig wendet <input type="time"> keine Validierung auf eingegebene Werte an, außer dass die Benutzeroberfläche des Benutzeragenten normalerweise nicht zulässt, dass Sie etwas anderes als einen Zeitwert eingeben. Dies ist hilfreich, aber Sie können sich nicht vollständig darauf verlassen, dass der Wert ein korrekter Zeit-String ist, da es sich um einen leeren String ("") handeln könnte, was zulässig ist.

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

<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 wurde. Hier nutzen wir die :valid- und :invalid-Eigenschaften von CSS, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir fügen ein als erzeugter Inhalt erstelltes Symbol in einem <span> neben der Eingabe hinzu.

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.

Mindest- und Höchstwert über Mitternacht hinweg setzen

Indem Sie ein min-Attribut größer als das max-Attribut setzen, wird der gültige Zeitbereich um Mitternacht gewickelt, um einen gültigen Zeitbereich zu erzeugen. Diese Funktionalität wird von keinem anderen Eingabetyp unterstützt.

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
}

Zusätzlich können Sie das required-Attribut verwenden, um das Ausfüllen der Zeit als obligatorisch zu machen. Browser zeigen einen Fehler an, wenn Sie versuchen, eine Zeit zu übermitteln, die außerhalb der festgelegten Grenzen liegt oder wenn das Zeitfeld leer ist.

Betrachten wir ein Beispiel; hier haben wir Mindest- und Höchstzeiten festgelegt und das Feld auch als erforderlich markiert:

<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:

In diesem Beispiel erstellen wir ein Interface-Element zur Auswahl der Zeit mit dem nativen Picker, der mit <input type="time"> erstellt wurde:

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• Das generische <input>-Element und die Schnittstelle, um es zu manipulieren, HTMLInputElement
• Datums- und Zeitformate in HTML
• Leitfaden für Datums- und Zeitwähler