<input type="time">

Probieren Sie es aus

<label for="appointment">Choose a time for your meeting:</label>

<input
  type="time"
  id="appointment"
  name="appointment"
  min="09:00"
  max="18:00"
  required />

<small>Office hours are 9am to 6pm</small>

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Das value-Attribut setzen

Sie können einen Standardwert für die Eingabe festlegen, indem Sie beim Erstellen des <input>-Elements einen gültigen Zeitwert im value-Attribut einfügen, so:

<label for="appointment-time">Choose an appointment time: </label>
<input
  id="appointment-time"
  type="time"
  name="appointment-time"
  value="13:30" />

Den Wert mit JavaScript setzen

Sie können den Zeitwert auch in JavaScript mithilfe der HTMLInputElement value-Eigenschaft abrufen und setzen, zum Beispiel:

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

Zeitformat des Wertes

Der value eines time Eingabefeldes ist immer im 24-Stunden-Format mit führenden Nullen: HH:mm, unabhängig vom Eingabeformat, das voraussichtlich basierend auf der Benutzersprache (oder durch den Benutzeragenten) 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 Zeitwertes, das von diesem Eingabetyp verwendet wird, unter Zeitstrings erfahren.

In diesem Beispiel können Sie den Wert der Zeiteingabe sehen, indem Sie eine Zeit eingeben und dann beobachten, wie sich der Wert verä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> zur Anzeige des Werts der time Eingabe:

<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 die Inhalte eines Eingabeelements ändern. 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;
});

Wenn ein Formular mit einer time Eingabe abgesendet wird, wird der Wert kodiert, bevor er in die Formulardaten aufgenommen wird. Der Eintrag der Formulardaten für eine Zeiteingabe liegt immer in der Form name=HH%3Amm, oder name=HH%3Amm%3Ass wenn Sekunden enthalten sind (siehe Verwendung des step-Attributs).

Zusätzliche Attribute

Zusätzlich zu den allen <input> Elementen gemeinsamen Attributen bieten time Eingaben die folgenden Attribute.

list

Der Wert des list-Attributs ist die id eines im selben Dokument befindlichen <datalist> Elements. Die <datalist> bietet eine Liste vordefinierter Werte an, die dem Benutzer für diese Eingabe vorgeschlagen werden sollen. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in den vorgeschlagenen Optionen enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste wählen oder einen anderen Wert angeben.

max

Ein String, der die späteste akzeptierte Zeit angibt, im gleichen Zeitwertformat wie oben beschrieben. Wenn der angegebene String keine gültige Zeit ist, wird kein maximaler Wert festgelegt.

min

Ein String, der die früheste akzeptierte Zeit angibt, im zuvor beschriebenen Zeitwertformat. Wenn der angegebene Wert kein gültiger Zeitstring ist, wird kein minimaler Wert festgelegt.

readonly

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch JavaScript-Code, der die HTMLInputElement value-Eigenschaft direkt setzt, geändert werden.

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Step-Basiswert entfernt sind, sind gültig. Der Step-Basiswert ist min, falls angegeben, ansonsten value, oder 0 (00:00:00), falls beides nicht angegeben ist.

Für time Eingaben wird der Wert von step in Sekunden angegeben und als Anzahl von Millisekunden behandelt, die 1000 mal dem step-Wert entspricht (der zugrundeliegende numerische Wert ist in Millisekunden). Der Standardwert ist 60, was 1 Minute anzeigt.

Ein String-Wert von any bedeutet, dass kein Schritt festgelegt ist und jeder Wert erlaubt ist (jegliche andere Einschränkungen, wie min und max ausgenommen). In Wirklichkeit hat es denselben Effekt wie 60 für time Eingaben, da die Auswahl-UI in diesem Fall nur die Auswahl ganzer Minuten erlaubt.

Verwendung von Zeiteingaben

Grundlegende Verwendung von Zeit

Die grundlegendste Verwendung von <input type="time"> besteht aus einer einfachen 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>

Steuerung der Eingabegröße

<input type="time"> unterstützt keine Formulardimensionierungsattribute wie size, da Zeiten immer ungefähr die gleiche Anzahl von Zeichen lang sind. Sie müssen sich bei Größenanforderungen auf CSS verlassen.

Verwendung des step-Attributs

Sie können das step-Attribut verwenden, um die Menge der Zeit zu variieren, die beim Erhöhen oder Verringern der Zeit übersprungen wird (zum Beispiel, damit die Zeit in Schritten von 10 Minuten eingestellt wird, wenn auf die kleinen Pfeil-Symbole geklickt wird).

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 Standardeinstellung zeigen die meisten Benutzeragenten-Zeiten UIs Stunden und Minuten, aber keine Sekunden an. Wenn das step-Attribut mit einem anderen numerischen Wert als einem, der durch 60 teilbar ist, enthalten ist, fügt es Sekunden zur UI hinzu, falls der min- oder max-Wert die Sekunden nicht bereits sichtbar gemacht 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 von Minuten oder Stunden in Sekunden an, z.B. 120 für 2 Minuten oder 7200 für 2 Stunden.

Validierung

Standardmäßig wendet <input type="time"> keine Validierung auf eingegebene Werte an, abgesehen davon, dass die Benutzeroberfläche des Benutzeragents normalerweise nicht erlaubt, etwas anderes als einen Zeitwert einzugeben. Dies ist hilfreich, aber Sie können nicht vollständig darauf vertrauen, dass der Wert ein richtiger Zeitstring ist, da es ein leerer String ("") sein könnte, was zulässig ist.

Maximale und minimale Zeiten festlegen

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 im obigen Beispiel verwendete CSS. 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 Inhaltssymbol 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 ist hier, dass:

• Nur Zeiten zwischen 12:00 und 18:00 als gültig betrachtet werden; Zeiten außerhalb dieses Bereichs werden als ungültig bezeichnet.

Min und Max um Mitternacht kreuzen

Durch das Festlegen eines min-Attributs, das größer als das max-Attribut ist, wird der gültige Zeitbereich über Mitternacht verlängert, 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
}

Zeiten obligatorisch machen

Außerdem 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 zu übermitteln, die außerhalb der festgelegten Grenzen liegt, oder ein leeres Zeitfeld.

Schauen wir uns ein Beispiel an; hier haben wir minimale und maximale Zeiten festgelegt und das Feld auch 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 mit einer Zeit außerhalb der festgelegten Grenzen) zu übermitteln, zeigt der Browser einen Fehler an. Versuchen Sie, jetzt mit dem Beispiel zu experimentieren:

Beispiele

In diesem Beispiel erstellen wir ein Interface-Element zur Auswahl der Zeit mit dem nativen Picker, der mit <input type="time"> erstellt wird:

HTML

<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"
    required />
  <span class="validity"></span>
</form>

CSS

input[type="time"] {
  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;
}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• Das generische <input> Element und die Schnittstelle zur Manipulation, HTMLInputElement
• Datums- und Zeitformate, die in HTML verwendet werden
• Datum und Uhrzeit Auswahlanleitung