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

Zusätzliche Attribute

Zusätzlich zu den gemeinsamen Attributen aller <input>-Elemente 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 als Vorschläge für den Benutzer dieser Eingabe. Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die angegebenen Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

max

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

min

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

readonly

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

step

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 eine ganze Anzahl von Schritten von der Schrittgrundlage entfernt sind, sind gültig. Die Schrittgrundlage ist min, falls angegeben, ansonsten value oder 0 (00:00:00), falls keines von beiden angegeben ist.

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

Ein String-Wert von any bedeutet, dass kein Stepping impliziert wird und jeder Wert zulässig ist (vorbehaltlich anderer Einschränkungen wie min und max). In der Praxis hat es bei time-Eingaben den gleichen Effekt wie 60, da die Picker-Benutzeroberfläche in diesem Fall nur das Auswählen ganzer Minuten ermöglicht.

Validierung

Standardmäßig wendet <input type="time"> keine Validierung auf die eingegebenen Werte an, außer dass die Benutzeroberfläche des Benutzeragenten Ihnen im Allgemeinen nicht erlaubt, etwas anderes als einen Zeitwert einzugeben. Dies ist hilfreich, aber Sie können nicht vollständig darauf vertrauen, dass der Wert ein gültiger Zeitstring ist, da er möglicherweise ein leerer String ("") ist, was zulässig ist. Für Beispiele zur Constraint-Validierung unter Verwendung der Attribute min, max, step und required siehe den Abschnitt Höchst- und Mindestzeiten festlegen.

Beispiele

Grundlegende Verwendung von Zeit

Die grundlegendste Verwendung von <input type="time"> umfasst eine einfache Kombination aus einem <input>- und einem <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 Zeit-Picker-Benutzeroberfläche

In diesem Beispiel erstellen wir ein Schnittstellenelement zur Zeitauswahl unter Verwendung des nativen Pickers, der mit <input type="time"> erstellt wird:

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

Steuereingabegröße

<input type="time"> unterstützt keine Formgrößenattribute wie size, da Zeiten immer ungefähr dieselbe Anzahl von Zeichen haben. Sie müssen auf CSS für Größenanforderungen zurückgreifen.

Das Wert-Attribut setzen

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

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

Sie können den Zeitwert auch in JavaScript über die value-Eigenschaft des HTMLInputElement abrufen und festlegen, 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 Benutzerlokalisierung (oder durch den Benutzeragenten) ausgewählt wird. Falls die Zeit Sekunden einschließt (siehe Verwendung des step-Attributs), ist das Format immer HH:mm:ss. Weitere Informationen über das Format des von diesem Eingabetyp verwendeten Zeitwertes finden Sie in Zeitstrings.

In diesem Beispiel können Sie den Wert der Zeiteingabe sehen, indem Sie eine Zeit eingeben und beobachten, wie er 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 lauschen, das jedes Mal ausgelöst wird, wenn sich der Inhalt eines Eingabeelements ändert. Wenn dies geschieht, 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;
});

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

Verwendung des step-Attributs

Sie können das step Attribut verwenden, um die Menge der Zeit zu variieren, die vorwärts oder rückwärts gesprungen wird, wann immer die Zeit erhöht oder verringert wird (zum Beispiel, damit sich die Zeit in 10-Minuten-Schritten bewegt, wenn Sie die kleinen Pfeilsymbole anklicken).

Es nimmt einen ganzzahligen Wert an, der die Anzahl der Sekunden definiert, die Sie inkrementieren möchten; der Standardwert ist 60 Sekunden. Mit diesem als Standard zeigen die meisten Benutzeragenten-Oberflächen Stunden und Minuten, aber keine Sekunden an. Die Einbeziehung des step Attributs mit einem beliebigen numerischen Wert, der nicht durch 60 teilbar ist, fügt Sekunden in die Benutzeroberfläche ein, es sei denn, der min- oder max-Wert hat nicht bereits dafür gesorgt, 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 anzugeben, geben Sie die Anzahl der Minuten oder Stunden in Sekunden an, wie z.B. 120 für 2 Minuten oder 7200 für 2 Stunden.

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 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 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 generiertes Inhalte-Symbol neben der Eingabe als <span> 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:

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

Min und Max über Mitternacht führen

Indem man ein min Attribut größer als das max Attribut setzt, wird der gültige Zeitbereich um Mitternacht herumlaufen, um einen gültigen Zeitbereich zu produzieren. 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 Eingabe der Zeit verbindlich 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 enthält.

Betrachten wir ein Beispiel: hier haben wir Mindest- und Höchstzeiten festgelegt und auch das Feld als 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. 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 zur Manipulation, HTMLInputElement
• Datum- und Zeitformate in HTML
• Datum- und Zeit-Auswahl-Tutorial