<input type='time'>

Sie können einen Standardwert für die Eingabe festlegen, indem Sie eine gültige Uhrzeit 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 in JavaScript über die HTMLInputElement-value-Eigenschaft abrufen und festlegen, zum Beispiel:

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

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 dem Ländercode des Benutzers (oder durch den User-Agent) ausgewählt wird. Wenn die Zeit Sekunden enthält (siehe Verwendung des step-Attributs), ist das Format immer HH:mm:ss. Mehr über das Format des von diesem Eingabetyp verwendeten Zeitwerts erfahren Sie unter Zeitstrings.

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

Zuerst ein Blick auf das HTML. Dies ist einfach genug, mit der Beschriftung und Eingabe, wie wir es vorher gesehen haben, aber mit der Hinzufügung eines <p>-Elements 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 beobachten, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. Wenn dies geschieht, werden die Inhalte des <span> mit dem 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, das eine time-Eingabe enthält, abgeschickt wird, wird der Wert kodiert, bevor er in die Formulardaten aufgenommen wird. Der Formulareintrag für eine Zeiteingabe hat immer die Form name=HH%3Amm, oder name=HH%3Amm%3Ass, wenn Sekunden enthalten sind (siehe Verwendung des step-Attributs).

Zusätzlich zu den gemeinsamen Attributen aller <input>-Elemente bieten time-Eingaben die folgenden Attribute.

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

Ein Zeichenfolgenwert, der die späteste akzeptierte Zeit angibt, angegeben im gleichen Zeitwertformat wie oben beschrieben. Wenn die angegebene Zeichenfolge keine gültige Zeit ist, wird kein Maximalwert gesetzt.

Ein Zeichenfolgenwert, der die früheste akzeptierte Zeit angibt, angegeben im Zeitwertformat wie zuvor beschrieben. Wenn der angegebene Wert keine gültige Zeitzeichenfolge ist, wird kein Minimalwert gesetzt.

Ein Boolean-Attribut, welches, falls vorhanden, 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 spezielle Wert any, der unten beschrieben wird. Nur Werte, die mit der Basis für die Schrittweite (min, falls angegeben, value ansonsten, und ein entsprechender Standardwert, wenn keiner dieser Werte angegeben wird) übereinstimmen, sind gültig.

Ein Zeichenfolgenwert von any bedeutet, dass keine Schrittfolge impliziert ist und jeder Wert zulässig ist (unter Berücksichtigung anderer Einschränkungen wie min und max).

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

Wenn any als Wert für step festgelegt ist, wird das Standardmaß von 60 Sekunden verwendet und der Sekundenwert wird in der UI nicht angezeigt.

Die einfachste Verwendung von <input type="time"> beinhaltet eine grundlegende 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 Formgrößenattribute wie size, da Zeiten immer etwa dieselbe Anzahl von Zeichen lang sind. Sie müssen auf CSS für Größeneinstellungen zurückgreifen.

Sie können das step-Attribut verwenden, um die Menge an Zeit zu variieren, die bei jedem Inkrement oder Dekrement der Zeit übersprungen wird (zum Beispiel, damit sich die Zeit bei jedem Klick auf die kleinen Pfeil-Widgets um 10 Minuten bewegt).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, um die Sie inkrementieren möchten; der Standardwert sind 60 Sekunden. Mit dieser Einstellung zeigen die meisten Benutzer-Agent-Zeit-UIs Stunden und Minuten, aber keine Sekunden an. Das Einbeziehen des step-Attributs mit einem numerischen Wert, der sich nicht durch 60 teilen lässt, fügt der UI Sekunden hinzu, falls min oder max nicht bereits die Sichtbarkeit der Sekunden verursacht 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 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.

Standardmäßig wendet <input type="time"> keine Validierung auf eingegebene Werte an, abgesehen davon, dass die Benutzeroberfläche des Benutzer-Agents im Allgemeinen 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 ordnungsgemäßer Zeitstring ist, da es sich um einen leeren String ("") handeln kann, 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 legen wir eine Mindestzeit von 12:00 und eine Maximalzeit 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 CSS-Eigenschaften :valid und :invalid, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir fügen ein Icon als generiertes Inhaltssymbol 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 hier ist, dass:

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

Min und Max über Mitternacht hinweg festlegen

Indem Sie ein min-Attribut größer als das max-Attribut festlegen, wird der gültige Zeitbereich über Mitternacht hinweg verlängert, 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 verpflichtend zu machen. Browser zeigen einen Fehler an, wenn Sie versuchen, eine Zeit außerhalb der festgelegten Grenzen oder ein leeres Zeitfeld einzureichen.

Werfen wir einen Blick auf ein Beispiel; hier haben wir minimale und maximale Zeiten festgelegt und auch das Feld 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 einer Zeit außerhalb der festgelegten Grenzen) einzureichen, zeigt der Browser einen Fehler an. Versuchen Sie nun, mit dem Beispiel zu spielen:

In diesem Beispiel erstellen wir ein Interface-Element zur Zeitauswahl unter Verwendung des nativen Pickers, der mit <input type="time"> erstellt wird:

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• Das generische <input>-Element und die Schnittstelle zur Manipulation desselben, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• Datum- und Zeitwahl-Tutorial
• Kompatibilität von CSS-Eigenschaften