Wert des HTML-Attributs <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 Attributen, die allen <input>-Elementen gemeinsam sind, bieten Eingabefelder vom Typ time die folgenden Attribute.

list

Der Wert des Attributs list ist die id eines <datalist>-Elements im selben Dokument. Das <datalist> stellt eine Liste vordefinierter Werte bereit, die Benutzern für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht als Optionen vorgeschlagen. Die bereitgestellten Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der Liste auswählen oder einen anderen Wert eingeben.

max

Eine Zeichenfolge, die die späteste zulässige Uhrzeit angibt, und zwar im oben beschriebenen Uhrzeitformat. Ist die angegebene Zeichenfolge keine gültige Uhrzeit, wird kein Höchstwert festgelegt.

min

Eine Zeichenfolge, die die früheste zulässige Uhrzeit im zuvor beschriebenen Uhrzeitformat angibt. Ist der angegebene Wert keine gültige Uhrzeitzeichenfolge, wird kein Mindestwert festgelegt.

readonly

Ein boolesches Attribut, das – sofern vorhanden – festlegt, dass Benutzer das Feld nicht bearbeiten können. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die value-Eigenschaft von HTMLInputElement direkt setzt.

step

Das Attribut step ist eine Zahl, die die Schrittweite festlegt, der der Wert entsprechen muss, oder der unten beschriebene besondere Wert any. Gültig sind nur Werte, die vom Ausgangswert aus um eine ganzzahlige Anzahl von Schritten abweichen. Der Ausgangswert ist min, falls angegeben, andernfalls value oder 0 (00:00:00), falls keines von beiden angegeben ist.

Bei Eingabefeldern vom Typ time wird step in Sekunden angegeben und als Anzahl von Millisekunden behandelt, die dem 1000-Fachen des step-Werts entspricht (der zugrunde liegende Zahlenwert wird in Millisekunden angegeben). Der Standardwert ist 60, also 1 Minute.

Der Zeichenfolgenwert any bedeutet, dass keine Schrittweite vorgegeben ist und jeder Wert zulässig ist, sofern keine anderen Einschränkungen wie min und max gelten. In der Praxis hat er bei Eingabefeldern vom Typ time dieselbe Wirkung wie 60, da die Auswahloberfläche in diesem Fall nur ganze Minuten zur Auswahl anbietet.

Validierung

Standardmäßig wird bei <input type="time"> keine Validierung eingegebener Werte durchgeführt. Allerdings lässt die Oberfläche des User Agents in der Regel nur die Eingabe einer Uhrzeit zu. Das ist hilfreich, aber Sie können sich nicht vollständig darauf verlassen, dass der Wert eine gültige Uhrzeitzeichenfolge ist: Auch eine leere Zeichenfolge ("") ist zulässig. Beispiele für die Validierung mithilfe der Attribute min, max, step und required finden Sie im Abschnitt Höchst- und Mindestzeiten festlegen.

Beispiele

Grundlegende Verwendung von time

Die einfachste Verwendung von <input type="time"> besteht aus einer Kombination eines <input>- und eines <label>-Elements:

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

Eine Oberfläche zur Auswahl einer Uhrzeit erstellen

In diesem Beispiel erstellen wir ein Oberflächenelement zur Auswahl einer Uhrzeit mit dem nativen Auswahlsteuerelement von <input type="time">:

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

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

Größe des Eingabefelds festlegen

<input type="time"> unterstützt keine Attribute zur Größenfestlegung wie size, da Uhrzeiten immer ungefähr gleich viele Zeichen lang sind. Verwenden Sie für die Größenfestlegung CSS.

Das Attribut value festlegen

Sie können einen Standardwert für das Eingabefeld festlegen, indem Sie beim Erstellen des <input>-Elements im Attribut value eine gültige Uhrzeit 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 Uhrzeitwert auch mit JavaScript über die value-Eigenschaft von HTMLInputElement abrufen und festlegen, zum Beispiel:

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

Format des Uhrzeitwerts

Der value eines time-Eingabefelds liegt unabhängig vom Eingabeformat immer im 24-Stunden-Format mit führenden Nullen vor: HH:mm. Das Eingabeformat wird wahrscheinlich anhand der Spracheinstellung des Benutzers (oder durch den User Agent) gewählt. Wenn die Uhrzeit Sekunden enthält (siehe Das Attribut step verwenden), lautet das Format immer HH:mm:ss. Weitere Informationen zum Format des von diesem Eingabetyp verwendeten Uhrzeitwerts finden Sie unter Uhrzeitzeichenfolgen.

Im folgenden Beispiel können Sie eine Uhrzeit eingeben und anschließend sehen, wie sich der Wert des Eingabefelds ändert.

Zunächst der HTML-Code: Wir fügen ein Label und ein Eingabefeld sowie ein <p>-Element mit einem <span> hinzu, um den Wert des time-Eingabefelds anzuzeigen:

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

Der JavaScript-Code überwacht das input-Ereignis des Uhrzeit-Eingabefelds, das bei jeder Änderung seines Inhalts ausgelöst wird. In diesem Fall wird der Inhalt des <span> durch den neuen Wert des Eingabefelds ersetzt.

const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener("input", () => {
  valueSpan.innerText = startTime.value;
});

Wenn ein Formular mit einem time-Eingabefeld abgesendet wird, wird dessen Wert codiert, bevor er in die Formulardaten aufgenommen wird. Der Formulardateneintrag für ein Uhrzeit-Eingabefeld hat immer die Form name=HH%3Amm oder, wenn Sekunden enthalten sind, name=HH%3Amm%3Ass (siehe Das Attribut step verwenden).

Das Attribut step verwenden

Mit dem Attribut step können Sie festlegen, um wie viel sich die Uhrzeit bei jeder Erhöhung oder Verringerung ändert – beispielsweise um jeweils 10 Minuten, wenn auf die kleinen Pfeilschaltflächen geklickt wird.

Das Attribut erwartet eine ganze Zahl, die die Schrittweite in Sekunden angibt; der Standardwert beträgt 60 Sekunden. Bei diesem Standardwert zeigen die meisten Uhrzeitoberflächen von User Agents Stunden und Minuten, aber keine Sekunden an. Wenn das Attribut step einen Zahlenwert enthält, der nicht durch 60 teilbar ist, werden Sekunden in der Benutzeroberfläche angezeigt, sofern sie nicht bereits aufgrund des min- oder max-Werts sichtbar sind.

<label for="appointment-time">Choose an appointment time: </label>
<input id="appointment-time" type="time" name="appointment-time" step="2" />

Um Minuten oder Stunden als Schrittweite festzulegen, geben Sie deren Anzahl in Sekunden an, beispielsweise 120 für 2 Minuten oder 7200 für 2 Stunden.

Höchst- und Mindestzeiten festlegen

Mit den Attributen min und max können Sie die Uhrzeiten einschränken, die Benutzer auswählen dürfen. Im folgenden Beispiel legen wir 12:00 als früheste und 18:00 als späteste Uhrzeit fest:

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

Hier ist der im obigen Beispiel verwendete CSS-Code. Wir verwenden die CSS-Pseudoklassen :valid und :invalid, um das Eingabefeld abhängig davon zu gestalten, ob sein aktueller Wert gültig ist. Neben dem Eingabefeld fügen wir einem <span> ein Symbol als generierten Inhalt 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:

• Nur Uhrzeiten zwischen 12:00 und 18:00 gelten als gültig; Uhrzeiten außerhalb dieses Bereichs werden als ungültig gekennzeichnet.

Zeitbereich über Mitternacht hinweg festlegen

Wenn Sie das Attribut min auf einen Wert setzen, der größer ist als der Wert des Attributs max, erstreckt sich der gültige Zeitbereich über Mitternacht. Kein anderer Eingabetyp unterstützt diese Funktion.

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
}

Die Eingabe einer Uhrzeit verpflichtend machen

Mit dem Attribut required können Sie außerdem die Eingabe einer Uhrzeit verpflichtend machen. Browser zeigen einen Fehler an, wenn Sie versuchen, eine Uhrzeit außerhalb des festgelegten Bereichs oder ein leeres Uhrzeitfeld abzusenden.

Im folgenden Beispiel haben wir eine früheste und eine späteste Uhrzeit festgelegt und das Feld 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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Wenn Sie versuchen, das Formular mit einer unvollständigen Uhrzeit (oder einer Uhrzeit außerhalb des festgelegten Bereichs) abzusenden, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel aus:

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input type="date">
• <input type="datetime-local">
• <input type="week">
• <input type="month">
• Das allgemeine <input>-Element und die zu seiner Bearbeitung verwendete Schnittstelle HTMLInputElement
• In HTML verwendete Datums- und Uhrzeitformate
• Tutorial zu Auswahlsteuerelementen für Datum und Uhrzeit