<input type="time">

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

<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 in JavaScript mit der HTMLInputElement value-Eigenschaft abrufen und setzen, zum Beispiel:

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

Der value des time-Inputs ist stets in einem 24-Stunden-Format mit führenden Nullen: HH:mm, unabhängig vom Eingabeformat, das wahrscheinlich basierend auf der Lokalisierung des Benutzers (oder durch den Benutzer-Agenten) ausgewählt wird. Wenn die Zeit Sekunden umfasst (siehe Verwendung des step-Attributs), ist das Format immer HH:mm:ss. Mehr über das Format des Zeitwerts, der von diesem Eingabetyp verwendet wird, können Sie bei Zeitstrings lernen.

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

Zuerst ein Blick auf das HTML. Wir fügen ein Label und ein Input hinzu und ergänzen ein <p>-Element mit einem <span>, um den Wert des time-Inputs 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 ergänzt die Zeiteingabe um Code, der das input-Ereignis überwacht, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Input-Elements ändert. Wenn dies geschieht, werden die Inhalte des <span> mit dem neuen Wert des Input-Elements ersetzt.

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

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

Wenn ein Formular mit einer Zeiteingabe gesendet wird, wird der Wert kodiert, bevor er in die Formulardaten aufgenommen wird. Der Formulareintrag für eine Zeiteingabe hat stets die Form name=HH%3Amm, oder name=HH%3Amm%3Ass, wenn Sekunden einbezogen sind (siehe Verwendung des step-Attributs).

Zusätzlich zu den allgemeinen Attributen, die alle <input>-Elemente offerieren, bieten time-Inputs folgende Attribute.

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Die <datalist> bietet dem Benutzer eine Liste vordefinierter Werte zur Auswahl für diese Eingabe. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten 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 akzeptierte Zeit angibt, im selben Zeitwertformat, wie oben beschrieben. Wenn der vorgegebene String keine gültige Zeit ist, wird kein maximaler Wert gesetzt.

Ein String, der die früheste akzeptierte Zeit angibt, im Zeitwertformat, wie vorher beschrieben. Wenn der angegebene Wert kein gültiger Zeitstring ist, wird kein Mindestwert gesetzt.

Ein Boolean-Attribut, das bei Vorhandensein bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen der HTMLInputElement value-Eigenschaft durch JavaScript-Code geändert werden.

Das step-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder der besondere Wert any, der unten beschrieben wird. Nur Werte, die gleich der Grundlage für die Schrittgröße sind (min, falls angegeben, value ansonsten, und ein entsprechender Standardwert, wenn keiner von beidem angegeben ist), sind zulässig.

Ein String-Wert von any bedeutet, dass keine Schrittweise impliziert ist und jeglicher Wert erlaubt ist (unter Ausnahmen 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 numerische Wert in Millisekunden ist). Der Standardwert von step ist 60, was 60 Sekunden (bzw. 1 Minute oder 60.000 Millisekunden) entspricht.

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

Die einfachste Verwendung von <input type="time"> besteht aus einer einfachen Kombination aus <input> und <label>-Element, wie unten gezeigt:

<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 Form-Attributgrößen wie size, da Zeiten immer ungefähr gleich lang sind. Sie müssen auf CSS zurückgreifen, um Größenanforderungen zu erfüllen.

Sie können das step-Attribut verwenden, um den Betrag zu variieren, um den die Zeit erhöht oder verringert wird (zum Beispiel, damit die Zeit bei einem Klick auf die kleinen Pfeilsteuerungen jeweils um 10 Minuten bewegt wird).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, um die Sie die Zeit erhöhen möchten; der Standardwert ist 60 Sekunden. Wenn dies als Standard festgelegt ist, beschränken sich die meisten Benutzer-Agenten-Zeit-UIs auf Stunden und Minuten, aber nicht auf Sekunden. Die Einbeziehung des step-Attributs mit einem numerischen Wert, der nicht durch 60 teilbar ist, fügt Sekunden zur Benutzeroberfläche hinzu, wenn der min oder max-Wert die Sekunden nicht bereits sichtbar gemacht hat.

<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, zum Beispiel 120 für 2 Minuten oder 7200 für 2 Stunden.

Standardmäßig wendet <input type="time"> keinerlei Validierung auf eingegebene Werte an, außer dass die Benutzeroberfläche des Benutzer-Agenten normalerweise verhindert, 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 Zeitstring ist, da er möglicherweise ein leerer String ("") ist, was erlaubt ist.

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

<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 das Eingabefeld basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir fügen ein Icon als generiertes Inhaltsicon auf 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 ist hier, 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

Indem ein min-Attribut größer als das max-Attribut festgelegt wird, wird der gültige Zeitbereich um Mitternacht herum verlängert, um einen gültigen Zeitbereich zu erzeugen. Diese Funktionalität wird von keiner anderen Eingabetype 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
}

Zudem können Sie das required-Attribut verwenden, um die Angabe der Zeit als zwingend erforderlich zu kennzeichnen. Browser zeigen einen Fehler an, wenn versucht wird, eine Zeit zu übermitteln, die außerhalb der festgelegten Grenzen liegt, oder ein leeres Zeitfeld.

Sehen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstzeiten festgelegt und das Feld ebenfalls 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) einzureichen, zeigt der Browser einen Fehler an. Probieren Sie jetzt mit dem Beispiel herum:

In diesem Beispiel erstellen wir ein Oberflächenelement zur Auswahl einer 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 zu dessen Manipulation, HTMLInputElement
• Datums- und Zeitformate, die in HTML verwendet werden
• Anleitung zum Datum- und Zeit-Picker