<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 einschließen, 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 mit der 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 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:

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

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ätzlich zu den Attributen, die allen <input>-Elementen gemeinsam sind, bieten time-Eingaben die folgenden Attribute.

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.

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.

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.

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.

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).

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.

Die grundlegendste Verwendung von <input type="time"> umfasst eine einfache Kombination von <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 Formulargrößenattribute wie size, da Zeiten immer in etwa gleich lang sind. Für Größenanforderungen müssen Sie auf CSS zurückgreifen.

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.

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

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:

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

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.

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

<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 Schnittstellenelement zur Auswahl der Zeit 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, die zu seiner Manipulation verwendet wird, HTMLInputElement
• Datum- und Zeitformate in HTML
• Date and Time picker Anleitung