<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

Neben den Attributen, die allen <input>-Elementen gemeinsam sind, bieten time-Eingaben die folgenden Attribute.

list

Die Werte des List-Attributs sind die id eines <datalist>-Elements, das sich im selben Dokument befindet. Der <datalist> liefert eine Liste vordefinierter Werte, die dem Nutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge und keine Anforderungen: Nutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

max

Ein Zeichenfolgenwert, der die späteste zu akzeptierende Uhrzeit angibt, angegeben im selben Zeitwertformat wie oben beschrieben. Wenn die angegebene Zeichenfolge keine gültige Uhrzeit ist, wird kein Maximalwert festgelegt.

min

Eine Zeichenfolge, die die früheste zu akzeptierende Uhrzeit angibt, angegeben im Zeitwertformat, wie zuvor beschrieben. Wenn der angegebene Wert keine gültige Zeitzeichenfolge ist, wird kein Minimalwert festgelegt.

readonly

Ein boolesches Attribut, das, sofern vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin von JavaScript-Code geändert werden, der direkt die Eigenschaft HTMLInputElement value setzt.

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, die der Wert einhalten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Schritt-Basiswert entfernt sind, sind gültig. Der Schritt-Basiswert ist min, wenn angegeben, value andernfalls, oder 0 (00:00:00), wenn keiner bereitgestellt wird.

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 zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 60, was 1 Minute anzeigt.

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

Validierung

Standardmäßig wendet <input type="time"> keine Validierung auf eingegebene Werte an, abgesehen davon, dass die Benutzeroberfläche des Agenten 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 es eine leere Zeichenfolge ("") sein könnte, was erlaubt ist. Beispiele für Einschränkungsvalidierung mithilfe der Attribute min, max, step und required finden Sie im Abschnitt Festlegen von maximalen und minimalen Zeiten.

Beispiele

Grundlegende Verwendung von Zeit

Die grundlegendste Verwendung von <input type="time"> beinhaltet eine einfache 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>

Erstellen einer Zeitpicker-Oberfläche

In diesem Beispiel erstellen wir ein Interface-Element zur Auswahl der Zeit mit dem nativen Picker, 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;
}

Kontrolle der Eingabegröße

<input type="time"> unterstützt keine Formgrößenattribute wie size, da Zeiten immer ungefähr gleich lang in Zeichen sind. Für Größenbedürfnisse müssen Sie auf CSS zurückgreifen.

Den Wert-Attribut setzen

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

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

Zeitwertformat

Der value des time-Inputs ist immer im 24-Stunden-Format mit führenden Nullen: HH:mm, unabhängig vom Eingabeformat, welches wahrscheinlich basierend auf der Benutzer-Lokalisierung (oder dem User-Agent) ausgewählt wird. Wenn die Uhrzeit 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, der von diesem Eingabetyp verwendet wird, in Zeitzeichenfolgen.

In diesem Beispiel können Sie den Wert des Zeiteingabefeldes sehen, indem Sie eine Zeit eingeben und beobachten, wie er sich danach ändert.

Zunächst 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 des time-Inputs 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 dem Zeiteingabefeld Code hinzu, um auf das input-Ereignis zu achten, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. Wenn dies passiert, 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, das ein time-Input enthält, übermittelt wird, wird der Wert kodiert, bevor er in die Daten des Formulars aufgenommen wird. Der Formulardateneintrag für ein Zeiteingabeelement wird immer in der Form name=HH%3Amm oder name=HH%3Amm%3Ass sein, wenn Sekunden enthalten sind (siehe Verwendung des step-Attributs).

Verwendung des step-Attributs

Sie können das step-Attribut verwenden, um die Zeitmengen zu variieren, die gesprungen werden, wann immer die Zeit erhöht oder verringert wird (zum Beispiel, damit sich die Zeit in 10-Minuten-Schritten bewegt, wenn die kleinen Pfeil-Widgets gedrückt werden).

Es nimmt einen ganzzahligen Wert, der die Anzahl der Sekunden definiert, die Sie erhöhen möchten; der Standardwert ist 60 Sekunden. Mit diesem als Standardwert zeigen die Benutzeroberflächen der meisten User-Agenten Stunden und Minuten, aber keine Sekunden an. Das Einfügen des step-Attributes mit einem anderen numerischen Wert als einem Wert, der durch 60 teilbar ist, fügt Sekunden zur Benutzeroberfläche hinzu, sofern der min oder max Wert nicht bereits dazu geführt hat, dass die Sekunden sichtbar werden.

<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, z.B. 120 für 2 Minuten oder 7200 für 2 Stunden.

Festlegen von maximalen und minimalen Zeiten

Sie können die Attribute min und max verwenden, um die gültigen Zeiten einzuschränken, die vom Benutzer gewählt werden können. 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 machen wir Gebrauch von den CSS-Eigenschaften :valid und :invalid, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir fügen ein Icon als generiertes Inhaltsicon 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 Mitternacht überschreiten lassen

Durch das Festlegen eines min-Attributs, das größer als das max-Attribut ist, wird der gültige Zeitbereich um Mitternacht herum 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 erforderlich machen

Zusätzlich können Sie das required-Attribut verwenden, um die Zeitangabe 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 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:

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, die zur Manipulation verwendet wird, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• Anleitung zu Datums- und Zeitauswahl