<input type="time">

Sie können einen Standardwert für das Eingabefeld festlegen, indem Sie beim Erstellen des <input>-Elements einen gültigen Zeitpunkt im value-Attribut 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 mithilfe 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 Lokalisierung des Benutzers 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. Weitere Informationen über das Format des Zeitwerts, das von diesem Eingabetyp verwendet wird, finden Sie in Zeitzeichenfolgen.

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

Zuerst ein Blick auf das HTML. Wir fügen ein Label 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 der Zeit-Eingabe Code hinzu, um auf das input-Ereignis zu achten, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. In diesem Fall 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 mit einer time-Eingabe abgeschickt wird, wird der Wert codiert, bevor er in die Formulardaten aufgenommen wird. Der Formulareintrag für eine Zeit-Eingabe hat immer die Form name=HH%3Amm oder name=HH%3Amm%3Ass, wenn Sekunden eingeschlossen sind (siehe Using the step attribute).

Neben 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, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden 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.

Ein String, der die späteste zu akzeptierende Zeit angibt, im gleichen time value 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, in dem zuvor beschriebenen time value format. Wenn der angegebene Wert keine gültige Zeitzeichenfolge ist, wird kein Minimalwert festgelegt.

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin von JavaScript-Code geändert werden, indem direkt die HTMLInputElement-value-Eigenschaft festgelegt wird.

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 der Grundlage für das Schrittmaß entsprechen (min, falls angegeben, andernfalls value und ein geeigneter Standardwert, wenn keiner davon angegeben ist), sind gültig.

Ein String-Wert von any bedeutet, dass kein Schrittmaß impliziert ist und jeder Wert erlaubt ist (sofern keine anderen Einschränkungen wie min und max bestehen).

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 vorliegt). Der Standardwert von step ist 60, was 60 Sekunden (oder 1 Minute bzw. 60.000 Millisekunden) bedeutet.

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

Die grundlegendste Verwendung von <input type="time"> umfasst eine einfache Kombination aus <input> und <label>, 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 Größeneingabeattribute wie size, da Zeiten immer in etwa die gleiche Anzahl von Zeichen aufweisen. Sie müssen für Größenbedarf auf CSS zurückgreifen.

Sie können das step-Attribut verwenden, um die Menge der Zeit zu variieren, die bei einer Inkrementierung oder Dekrementierung übersprungen wird (zum Beispiel, wenn die Zeit mit den kleinen Pfeil-Widgets um jeweils 10 Minuten verschoben wird).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, um die Sie inkrementieren möchten; der Standardwert ist 60 Sekunden. Bei diesem Standard zeigen die meisten Benutzeroberflächen der User-Agents Stunden und Minuten, aber keine Sekunden an. Wenn das step-Attribut mit einem anderen numerischen Wert als einem Wert, der durch 60 teilbar ist, eingeschlossen wird, werden Sekunden in der Benutzeroberfläche hinzugefügt, sofern der min- oder max-Wert nicht 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, 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 Benutzeragenten generell 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 eine gültige Zeitzeichenfolge ist, da er möglicherweise eine leere Zeichenfolge ("") ist, was erlaubt ist.

Sie können die Attribute min und max verwenden, um gültige Zeiten zu beschränken, die der Benutzer auswählen kann. Im folgenden Beispiel setzen wir eine Mindestzeit auf 12:00 und eine Höchstzeit auf 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 verwenden 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 generierten Inhaltsicon an 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 angesehen.

Min und Max über Mitternacht hinweg

Durch das Setzen eines min-Attributs, das größer ist als das max-Attribut, wird der gültige Zeitbereich um Mitternacht herum fortgeführt und ein gültiger Zeitbereich erstellt. 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 zwingend erforderlich zu machen. Browser zeigen einen Fehler an, wenn versucht wird, eine Zeit außerhalb der gesetzten Grenzen oder ein leeres Eingabefeld zu übermitteln.

Sehen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstzeiten gesetzt und auch das Feld 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 einer Zeit außerhalb der festgelegten Grenzen) einzureichen, zeigt der Browser einen Fehler an. Versuchen Sie es nun selbst mit dem Beispiel:

In diesem Beispiel erstellen wir ein Interface-Element zum Zeitauswählen mit dem nativen Picker, 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 zur Manipulation verwendet wird, HTMLInputElement
• Datums- und Zeitformate, die in HTML verwendet werden
• Datum- und Zeit-Picker-Tutorial
• Kompatibilitätstabelle der CSS-Eigenschaften für Formularelemente