<input type="time">

Sie können einen Standardwert für die Eingabe festlegen, indem Sie eine gültige Uhrzeit im value-Attribute beim Erstellen des <input>-Elements verwenden, 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 den lokalen Einstellungen des Nutzers (oder vom Benutzeragenten) ausgewählt wird. Wenn die Uhrzeit Sekunden beinhaltet (siehe Verwendung des step-Attributs), lautet das Format immer HH:mm:ss. Sie können mehr über das Format des von diesem Eingabetyp verwendeten Zeitwerts unter Zeitstrings erfahren.

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

Zuerst 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 auf das input-Ereignis zu achten, 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, das eine time-Eingabe enthält, übermittelt wird, wird der Wert codiert, 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 für alle <input>-Elemente gemeinsamen Attributen bieten time-Eingaben die folgenden Attribute.

Der Wert des list-Attributs ist die id eines im selben Dokument befindlichen <datalist>-Elements. Das <datalist> bietet eine Liste von vordefinierten Werten, die dem Nutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden in den vorgeschlagenen Optionen nicht berücksichtigt. 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 zu akzeptierende Uhrzeit angibt, angegeben im selben Zeitwertformat wie oben beschrieben. Wenn der angegebene String keine gültige Uhrzeit ist, wird kein Maximalwert festgelegt.

Ein String, der die früheste zu akzeptierende Uhrzeit angibt, angegeben im im Zeitwertformat beschriebenen Format. Wenn der angegebene Wert keine gültige Zeitzeichenfolge ist, wird kein Minimalwert festgelegt.

Ein Boolean-Attribut, das, 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, an die sich der Wert halten muss, oder der spezielle Wert any, der im Folgenden beschrieben wird. Nur Werte, die mit der Grundlage für das Stepping (min, falls angegeben, value ansonsten und ein geeigneter Standardwert, falls keiner dieser Werte angegeben wird) übereinstimmen, sind gültig.

Ein String-Wert von any bedeutet, dass kein Stepping impliziert ist und jeder 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 numerische Wert in Millisekunden angegeben ist). Der Standardwert von step beträgt 60, was 60 Sekunden (oder 1 Minute oder 60.000 Millisekunden) entspricht.

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

Der grundlegendste Einsatz von <input type="time"> beinhaltet eine einfache Kombination aus <input> und <label>-Element, 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 auf CSS für Größenanforderungen zurückgreifen.

Sie können das step-Attribut verwenden, um die Menge der Zeit zu variieren, die bei jedem Erhöhen oder Verringern der Zeit gesprungen wird (zum Beispiel, damit die Zeit in 10-Minuten-Schritten erhöht wird, wenn Sie auf die kleinen Pfeilwidgets klicken).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, um die Sie inkrementieren möchten; der Standardwert beträgt 60 Sekunden. Mit diesem als Standardwert zeigt die Benutzeroberfläche des Benutzeragenten in der Regel Stunden und Minuten, aber keine Sekunden an. Das Einfügen des step-Attributs mit einem numerischen Wert, der nicht durch 60 teilbar ist, fügt Sekunden zur Benutzeroberfläche hinzu, wenn nicht das min- oder max-Wert bereits dazu geführt hat, dass die Sekunden sichtbar sind.

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

Standardmäßig wendet <input type="time"> keine Validierung von eingegebenen Werten an, außer dass die Benutzeroberfläche des Benutzeragenten im Allgemeinen nicht erlaubt, 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 er möglicherweise eine Leerzeichenzeile ("") ist, die erlaubt ist.

Sie können die Attribute min und max verwenden, um die gültigen Zeiten einzuschränken, die der Benutzer auswählen kann. Im folgenden Beispiel setzen wir eine minimal gültige Zeit von 12:00 und eine maximal gültige Zeit 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 wird. Hier nutzen wir die CSS-Eigenschaften :valid und :invalid, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir fügen ein Symbol als erzeugtes Inhaltssymbol auf einem <span> neben der Eingabe ein.

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 dieser Spanne werden als ungültig gekennzeichnet.

Min und Max über Mitternacht hinaus festlegen

Durch Einstellen eines min-Attributs, das größer ist als das max-Attribut, wird der gültige Zeitbereich über Mitternacht herumgehen, um einen gültigen Zeitbereich zu produzieren. 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
}

Darüber hinaus können Sie das required-Attribut verwenden, um das Ausfüllen der Zeit obligatorisch zu machen. Browser zeigen einen Fehler an, wenn Sie versuchen, eine Zeit außerhalb der festgelegten Grenzen oder ein leeres Zeitfeld einzugeben.

Schauen wir uns ein Beispiel an; hier haben wir minimale und maximale Zeiten festgelegt und das Feld auch als erforderlich gekennzeichnet:

<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) zu übermitteln, zeigt der Browser einen Fehler an. Versuchen Sie, jetzt mit dem Beispiel zu spielen:

In diesem Beispiel erstellen wir ein Benutzeroberflächenelement zur Wahl der Uhrzeit mit dem nativen Picker, erstellt mit <input type="time">:

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• Das generische <input>-Element und die Schnittstelle, die zu dessen Manipulation verwendet wird, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• Anleitung zum Datum- und Uhrzeit-Picker