<input type="time">

Sie können einen Standardwert für die Eingabe setzen, indem Sie beim Erstellen des <input>-Elements einen gültigen Zeitwert im value-Attribut hinzufügen, 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 value-Eigenschaft des HTMLInputElement abrufen und setzen, zum Beispiel:

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

Der value des time-Inputs ist immer im 24-Stunden-Format mit führenden Nullen: HH:mm, unabhängig vom Eingabeformat, das wahrscheinlich basierend auf den Locale-Einstellungen des Benutzers (oder durch den User Agent) ausgewählt wird. Wenn die Zeit Sekunden beinhaltet (siehe Verwendung des step-Attributs), ist das Format immer HH:mm:ss. Sie können mehr über das Format des Zeitwerts erfahren, der von diesem Eingabetyp verwendet wird, unter Zeitstrings.

In diesem Beispiel können Sie den Wert der Zeiteingabe sehen, indem Sie eine Zeit eingeben und beobachten, wie sie sich anschließend ä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 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 mit einer time-Eingabe übermittelt 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 inkludiert sind (siehe Verwendung des step-Attributs).

Zusätzlich zu den allgemein für <input>-Elemente geltenden Attributen bieten time-Eingaben die folgenden Attribute.

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das im selben Dokument enthalten ist. Das <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden sollen. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten 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 akzeptierte Zeit angibt, im selben Zeitwertformat wie oben beschrieben. Wenn der angegebene String keine gültige Zeit darstellt, wird kein Maximalwert eingestellt.

Ein String, der die früheste akzeptierte Zeit angibt, gegeben im Zeitwertformat, das zuvor beschrieben wurde. Wenn der angegebene Wert keine gültige Zeitzeichenfolge ist, wird kein Minimalwert gesetzt.

Ein Boolean-Attribut, welches, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen der value-Eigenschaft des HTMLInputElement durch JavaScript-Code geändert werden.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert halten muss, oder den speziellen Wert any, der unten beschrieben wird. Nur Werte, die gleich dem Ausgangspunkt für das Inkrement sind (min, falls angegeben, andernfalls value und ein entsprechender Standardwert, wenn keiner dieser Werte angegeben ist) sind gültig.

Ein String-Wert von any bedeutet, dass kein Inkrement impliziert ist und jeder Wert erlaubt ist (unter Ausschluss 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 zugrundeliegende Zahlwert in Millisekunden ist). Der Standardwert von step ist 60, was 60 Sekunden (oder 1 Minute bzw. 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 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 Formulargrößenattribute wie size, da Zeiten immer ungefähr die gleiche Anzahl an Zeichen haben. Sie müssen auf CSS zurückgreifen, um Größenanforderungen zu erfüllen.

Sie können das step-Attribut verwenden, um die Größe des Zeitsprungs zu variieren, wenn die Zeit erhöht oder verringert wird (zum Beispiel, so dass sich die Zeit bei jedem Klick auf die kleinen Pfeil-Widgets um 10 Minuten pro Schritt bewegt).

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 dieser Vorgabe zeigt die Benutzeroberfläche der meisten User Agents Stunden und Minuten, aber keine Sekunden. Die Einbeziehung des step-Attributs mit jedem anderen numerischen Wert als einem Wert, der durch 60 teilbar ist, fügt Sekunden zur Benutzeroberfläche hinzu, wenn nicht bereits der min- oder max-Wert 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 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 auf die eingegebenen Werte an, abgesehen von der Tatsache, dass die Benutzeroberfläche des User Agents Ihnen im Allgemeinen nicht erlaubt, etwas anderes als einen Zeitwert einzugeben. Das ist hilfreich, aber Sie können sich nicht vollständig darauf verlassen, dass der Wert eine korrekte Zeitzeichenfolge ist, da er eine leere Zeichenfolge ("") sein 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 auswählen kann. Im folgenden Beispiel legen wir eine minimale Zeit von 12:00 und eine maximale Zeit 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. Wir verwenden die :valid- und :invalid-CSS-Eigenschaften, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir fügen ein generiertes Inhaltsicon auf einem <span> neben dem Input 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 markiert.

Erstellen von min und max über Mitternacht hinweg

Durch Setzen eines min-Attributs größer als das max-Attribut wird der gültige Zeitbereich über Mitternacht hinweg gruppiert, um einen gültigen Zeitraum zu erstellen. 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 verpflichtend zu machen. Browser zeigen einen Fehler an, wenn Sie versuchen, eine Zeit zu übermitteln, die außerhalb der festgelegten Grenzen liegt, oder ein leeres Zeitfeld.

Schauen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstzeiten festgelegt und das Feld ebenfalls 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) abzusenden, zeigt der Browser einen Fehler an. Versuchen Sie jetzt, mit dem Beispiel zu experimentieren:

In diesem Beispiel erstellen wir ein Interface-Element zur Auswahl der Zeit 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 zur Manipulation, HTMLInputElement
• Verwendete Datums- und Zeitformate im HTML
• Eingabetypen für Datum und Uhrzeit Anleitung