<input type="time"> HTML-Attributwert

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;
}

Zusätzliche Attribute

Zusätzlich zu den Attributen, die allen <input>-Elementen gemeinsam sind, bieten time-Eingaben die folgenden Attribute.

list

Der Wert des Attributs list ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden in den vorgeschlagenen Optionen nicht berücksichtigt. Die bereitgestellten Werte sind Vorschläge und keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

max

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

min

Eine Zeichenfolge, die die früheste akzeptierte Uhrzeit angibt, im zuvor beschriebenen Zeitwertformat. Wenn der angegebene Wert keine gültige Zeitzeichenfolge ist, wird kein minimaler Wert festgelegt.

readonly

Ein Boolean-Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Der value kann jedoch weiterhin durch direktes Setzen der value-Eigenschaft des HTMLInputElement mit JavaScript 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, wenn angegeben, andernfalls value, oder 0 (00:00:00), wenn keiner angegeben wurde.

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

Ein Zeichenfolgenwert von any bedeutet, dass kein Step impliziert wird und jeder Wert (unter Berücksichtigung anderer Einschränkungen wie min und max) zulässig ist. In Wirklichkeit hat es denselben Effekt wie 60 für time-Eingaben, da in diesem Fall die Picker-Benutzeroberfläche nur die Auswahl ganzer Minuten erlaubt.

Validierung

Standardmäßig wendet <input type="time"> keine Validierung für eingegebene Werte an, abgesehen davon, dass die Benutzerschnittstelle des Benutzeragents im Allgemeinen nicht zulässt, dass etwas anderes als ein Zeitwert eingegeben wird. Das ist hilfreich, aber Sie können nicht vollständig darauf vertrauen, dass der Wert eine ordnungsgemäße Zeitzeichenfolge ist, da es eine leere Zeichenfolge ("") sein könnte, was erlaubt ist. Für Beispiele zur Eingabevalidierung unter Verwendung der Attribute min, max, step und required siehe den Abschnitt Höchste und niedrigste Zeiten einstellen.

Beispiele

Grundlegende Anwendungen von time

Die einfachste Verwendung von <input type="time"> beinhaltet eine grundlegende Kombination aus dem <input>- und dem <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>

Erstellen einer Zeitwähler-Oberfläche

In diesem Beispiel erstellen wir ein Oberflächenelement zur Auswahl der Zeit unter Verwendung des nativen Pickers, der mit <input type="time"> erstellt wurde:

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

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;
}

Steuerung der Eingabegröße

<input type="time"> unterstützt keine Formgrößenattribute wie size, da Zeiten immer etwa gleich lang sind. Sie müssen für Größenanforderungen auf CSS zurückgreifen.

Den Wert-Attribut setzen

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

<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 auch den Zeitwert in JavaScript mit der value-Eigenschaft des HTMLInputElement abrufen und setzen, zum Beispiel:

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

Zeitwertformat

Der value der time-Eingabe ist immer im 24-Stunden-Format mit führenden Nullen: HH:mm, unabhängig vom Eingabeformat, das wahrscheinlich basierend auf der Locale des Benutzers (oder des Benutzeragents) 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 Zeitwerts erfahren, das von diesem Eingabetyp verwendet wird, unter Zeitzeichenfolgen.

In diesem Beispiel können Sie den Wert der Zeiteingabe 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 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 auf das input-Ereignis zu achten, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. Wenn dies geschieht, wird der Inhalt 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;
});

Wenn ein Formular mit einer time-Eingabe übermittelt wird, wird der Wert codiert, bevor er in die Formulardaten aufgenommen wird. Der Formulardateneintrag für eine Zeiteingabe wird immer in der Form name=HH%3Amm, oder name=HH%3Amm%3Ass, falls Sekunden eingeschlossen sind (siehe Verwendung des Step-Attributs).

Verwendung des Step-Attributs

Sie können das step-Attribut verwenden, um die Zeitsprünge zu variieren, wann immer die Zeit erhöht oder verringert wird (zum Beispiel, sodass die Zeit in 10-Minuten-Schritten verläuft, wenn Sie auf die kleinen Pfeilsymbole klicken).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden angibt, um die Sie inkrementieren möchten; der Standardwert ist 60 Sekunden. Bei diesem Standardwert zeigen die Zeiteingabe-Benutzeroberflächen der meisten Benutzeragenten Stunden und Minuten, nicht jedoch Sekunden an. Die Aufnahme des step-Attributs mit einem numerischen Wert, der nicht durch 60 teilbar ist, fügt Sekunden zur Benutzeroberfläche hinzu, wenn nicht bereits der min- oder max-Wert die Sekunden 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 anzugeben, geben Sie die Anzahl der Minuten oder Stunden in Sekunden an, zum Beispiel 120 für 2 Minuten oder 7200 für 2 Stunden.

Höchste und niedrigste Zeiten einstellen

Sie können die min- und max-Attribute verwenden, um die gültigen Zeiten einzuschränken, die vom Benutzer gewählt werden können. Im folgenden Beispiel setzen wir eine minimale Zeit von 12:00 und eine maximale Zeit von 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 machen wir Gebrauch von den :valid- und :invalid-CSS-Eigenschaften, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir fügen ein generiertes Inhaltssymbol 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 ist hier, dass:

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

Min und Max um Mitternacht überschreiten

Indem Sie ein min-Attribut größer als das max-Attribut festlegen, umgeht der gültige Zeitbereich Mitternacht und erzeugt einen gültigen Zeitbereich. 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 erforderlich machen

Zusätzlich 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 umfasst.

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 einer Zeit außerhalb der festgelegten Grenzen) zu übermitteln, zeigt der Browser einen Fehler an. Versuchen Sie jetzt mit dem Beispiel zu spielen:

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 zu seiner Manipulation, HTMLInputElement
• Datum- und Zeitformate in HTML
• Anleitung zum Datum- und Zeitpicker