<input type="time">

Sie können einen Standardwert für die Eingabe festlegen, indem Sie beim Erstellen des <input>-Elements einen gültigen Zeitpunkt 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 mithilfe der HTMLInputElement-value-Eigenschaft abrufen und einstellen, zum Beispiel:

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

Der value des time-Inputs ist immer im 24-Stunden-Format, das führende Nullen enthält: 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 des Zeitwertes erfahren, der von diesem Eingabetyp verwendet wird, in Zeitstrings.

In diesem Beispiel können Sie durch Eingabe einer Uhrzeit den Wert der Zeiteingabe sehen und beobachten, wie er sich danach ändert.

Zuerst ein Blick auf das HTML. Wir fügen ein Label und eine Eingabe hinzu und fügen ein <p>-Element mit einem <span> hinzu, 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 time-Eingaben gesendet 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 Attributen, die allen <input>-Elementen gemeinsam sind, bieten time-Eingaben die folgenden Attribute.

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

Ein String, der die späteste zu akzeptierende Zeit angibt, im gleichen Zeitwert-Format, wie oben beschrieben. Wenn der angegebene String keine gültige Zeit ist, wird kein Maximalwert festgelegt.

Ein String, der die früheste zu akzeptierende Zeit angibt, im Zeitwert-Format, wie zuvor beschrieben. Wenn der angegebene Wert kein gültiger Zeitstring ist, wird kein Minimalwert festgelegt.

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch nach wie vor durch JavaScript direkt über die HTMLInputElement-value-Eigenschaft geändert werden.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert halten muss, oder der spezielle Wert any, der unten beschrieben wird. Es sind nur solche Werte gültig, die gleich dem Ausgangswert für das Schrittmaß (min, falls angegeben, value andernfalls und einem geeigneten Standardwert, wenn keiner von beiden bereitgestellt wird) sind.

Ein String-Wert any bedeutet, dass kein Schrittmaß 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 ist). Der Standardwert von step ist 60, was 60 Sekunden (oder 1 Minute bzw. 60.000 Millisekunden) bedeutet.

Wenn any als Wert für step festgelegt 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"> beinhaltet eine einfache 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 Formulargrößen-Attribute wie size, da Zeiten immer ungefähr gleich viele Zeichen lang sind. Sie müssen auf CSS für Größenanpassungen zurückgreifen.

Sie können das step-Attribut verwenden, um die Menge der Zeit zu variieren, die jedes Mal beim Erhöhen oder Verringern der Zeit übersprungen wird (zum Beispiel, sodass die Zeit um 10 Minuten auf einmal verschoben wird, wenn Sie die kleinen Pfeil-Widgets anklicken).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, um die Sie erhöhen möchten; der Standardwert ist 60 Sekunden. Mit diesem als Standard verwenden die meisten User-Agent-Zeit-Benutzeroberflächen Stunden und Minuten, aber keine Sekunden. Das Einfügen des step-Attributs mit einem numerischen Wert, der nicht durch 60 teilbar ist, fügt der Benutzeroberfläche Sekunden hinzu, sofern der min- oder max-Wert nicht bereits verursacht 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 anzugeben, spezifizieren Sie die Anzahl der Minuten oder Stunden in Sekunden, z.B. 120 für 2 Minuten oder 7200 für 2 Stunden.

Standardmäßig wendet <input type="time"> keine Validierung auf eingetragene Werte an, außer dass die Benutzeroberfläche des User-Agent im Allgemeinen nicht zulässt, dass Sie etwas anderes als einen Zeitwert eingeben. Das ist hilfreich, aber Sie können sich nicht darauf verlassen, dass der Wert ein ordnungsgemäßer Zeit-String ist, da es ein leerer String ("") sein könnte, was erlaubt 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 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 verwenden wir die :valid- und :invalid-CSS-Eigenschaften, um das Eingabefeld basierend darauf zu gestalten, ob der aktuelle Wert gültig ist oder nicht. Wir fügen ein Symbol als generiertes Inhalts-Symbol 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 hinweg festlegen

Indem Sie ein min-Attribut größer als das max-Attribut einstellen, wird der gültige Zeitbereich um Mitternacht herum verlaufen, 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 die Eingabe der Zeit zwingend erforderlich zu machen. Browser zeigen einen Fehler an, wenn Sie versuchen, eine Zeit, die außerhalb der gesetzten Grenzen liegt, oder ein leeres Zeitfeld zu übermitteln.

Schauen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstzeiten festgelegt und das Feld auch erforderlich gemacht:

<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. Probieren Sie das Beispiel jetzt aus:

In diesem Beispiel erstellen wir ein Interface-Element zur Auswahl der Zeit mithilfe des nativen Pickers, 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 seiner Manipulation, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• Anleitung zum Wählen von Datum und Zeit