HTML-Attributwert <input type="datetime-local">

Probieren Sie es aus

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

<input
  type="datetime-local"
  id="meeting-time"
  name="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00" />

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

input,
label {
  margin: 0.4rem 0;
}

Wert

Ein String, der den Wert des eingegebenen Datums darstellt. Das Format des Datums- und Uhrzeitwerts für diesen Eingabetyp wird unter Strings für lokale Datums- und Uhrzeitangaben beschrieben.

Sie können einen Standardwert festlegen, indem Sie im Attribut value ein Datum und eine Uhrzeit angeben:

<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="party-date"
  value="2017-06-01T08:30" />

Beachten Sie, dass sich die angezeigten Datums- und Uhrzeitformate vom tatsächlichen value unterscheiden. Datum und Uhrzeit werden entsprechend den Gebietsschemaeinstellungen angezeigt, die das Betriebssystem des Benutzers meldet. Der Datums- und Uhrzeitwert in value hat dagegen immer das Format YYYY-MM-DDTHH:mm. Wird der obige Wert beispielsweise an den Server übermittelt, sieht er so aus: party-date=2024-06-01T08:30.

Sie können den Datumswert auch in JavaScript über die value-Eigenschaft von HTMLInputElement abrufen und festlegen:

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";

Zusätzliche Attribute

Neben den Attributen, die allen <input>-Elementen gemeinsam sind, bieten Eingabefelder vom Typ datetime-local die folgenden Attribute.

max

Das späteste zulässige Datum mit Uhrzeit. Liegt der in das Element eingegebene value nach diesem Zeitpunkt, schlägt die Validierung anhand von Beschränkungen fehl. Ist der Wert des Attributs max kein gültiger String im Format YYYY-MM-DDTHH:mm, hat das Element keinen Höchstwert.

Dieser Wert muss ein Datum mit Uhrzeit angeben, das nach dem durch das Attribut min angegebenen Wert liegt oder ihm entspricht.

min

Das früheste zulässige Datum mit Uhrzeit. Bei früheren Zeitpunkten schlägt die Validierung anhand von Beschränkungen fehl. Ist der Wert des Attributs min kein gültiger String im Format YYYY-MM-DDTHH:mm, hat das Element keinen Mindestwert.

Dieser Wert muss ein Datum mit Uhrzeit angeben, das vor dem durch das Attribut max angegebenen Wert liegt oder ihm entspricht.

step

Das Attribut step ist eine Zahl, die festlegt, in welchen Schritten der Wert zulässig ist. Alternativ kann es den unten beschriebenen speziellen Wert any haben. Gültig sind nur Werte, die vom Ausgangswert aus um ein ganzzahliges Vielfaches der Schrittweite abweichen. Als Ausgangswert dient min, falls angegeben, andernfalls value oder 0 (der Beginn der Unix-Zeitrechnung, 1970-01-01T00:00), wenn keines von beiden angegeben ist.

Bei Eingabefeldern vom Typ datetime-local 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 Stringwert any bedeutet, dass keine Schrittweite vorgegeben ist und jeder Wert zulässig ist, sofern andere Beschränkungen wie min und max eingehalten werden. Tatsächlich hat any bei Eingabefeldern vom Typ datetime-local dieselbe Wirkung wie 60, da die Auswahloberfläche in diesem Fall nur die Auswahl ganzer Minuten ermöglicht.

Eingabefelder vom Typ datetime-local verwenden

Datums- und Uhrzeiteingaben sind für Entwickler praktisch: Sie bieten eine einfache Benutzeroberfläche zur Auswahl von Datum und Uhrzeit und vereinheitlichen das an den Server gesendete Datenformat unabhängig vom Gebietsschema des Benutzers. Berücksichtigen Sie jedoch die Bedürfnisse Ihrer Benutzer. Verlangen Sie keine Angaben, die Ihre App nicht benötigt.

Größe des Eingabefelds steuern

<input type="datetime-local"> unterstützt keine Attribute zur Größenfestlegung von Formularsteuerelementen wie size. Um die Größe dieser Elemente anzupassen, müssen Sie CSS verwenden.

Zeitzonen festlegen

Der Eingabetyp datetime-local bietet keine Möglichkeit, die Zeitzone und/oder das Gebietsschema des Datums- und Uhrzeitsteuerelements festzulegen. Diese Möglichkeit gab es beim Eingabetyp datetime, der inzwischen jedoch veraltet ist und aus der Spezifikation entfernt wurde. Die Hauptgründe dafür waren die fehlende Implementierung in Browsern und Bedenken hinsichtlich der Benutzeroberfläche und Benutzererfahrung. Einfacher ist es, ein oder mehrere Steuerelemente für Datum und Uhrzeit bereitzustellen und die Zeitzone in einem separaten Steuerelement zu erfassen.

Wenn Sie beispielsweise ein System erstellen, bei dem der Benutzer wahrscheinlich bereits angemeldet und seine Zeitzone bekannt ist, könnten Sie diese in einem Eingabefeld vom Typ hidden angeben:

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

Wenn Benutzer dagegen zusammen mit Datum und Uhrzeit auch eine Zeitzone eingeben können müssen, könnten Sie ein <select>-Element verwenden. Darin können Benutzer die passende Zeitzone auswählen, indem sie einen Ort aus einer Liste wählen:

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>

In beiden Fällen werden Datum und Uhrzeit sowie die Zeitzone als getrennte Daten an den Server übermittelt. Anschließend müssen Sie sie serverseitig entsprechend in der Datenbank speichern.

Validierung

Standardmäßig validiert <input type="datetime-local"> die eingegebenen Werte nicht. Die Benutzeroberflächen lassen im Allgemeinen nur Datums- und Uhrzeitangaben zu, was hilfreich ist. Benutzer könnten das Feld aber trotzdem leer lassen und das Formular absenden oder ein ungültiges Datum und/oder eine ungültige Uhrzeit eingeben, etwa den 32. April.

Mit min und max können Sie die verfügbaren Daten einschränken (siehe Höchst- und Mindestwerte für Datum und Uhrzeit festlegen). Mit dem Attribut required können Sie die Eingabe von Datum und Uhrzeit verpflichtend machen. Browser zeigen dann einen Fehler an, wenn Sie versuchen, ein Datum außerhalb der festgelegten Grenzen oder ein leeres Datumsfeld zu übermitteln.

Das folgende Beispiel legt Mindest- und Höchstwerte für Datum und Uhrzeit fest und macht das Feld zum Pflichtfeld:

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    </label>
    <input
      id="party"
      type="datetime-local"
      name="party-date"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>

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

Wenn Sie versuchen, das Formular mit einem unvollständigen Datum oder einem Datum außerhalb der festgelegten Grenzen abzusenden, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel aus:

Im obigen Beispiel wird das folgende CSS verwendet. Mit den CSS-Pseudoklassen :valid und :invalid gestalten wir das Eingabefeld abhängig davon, ob sein aktueller Wert gültig ist. Die Symbole platzieren wir in einem <span>-Element neben dem Eingabefeld.

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

Beispiele

Grundlegende Verwendung von datetime-local

Die einfachste Verwendung von <input type="datetime-local"> besteht aus einer Kombination aus einem <input>- und einem <label>-Element:

<label for="party">Enter a date and time for your party booking:</label>
<input id="party" type="datetime-local" name="party-date" />

Höchst- und Mindestwerte für Datum und Uhrzeit festlegen

Mit den Attributen min und max können Sie einschränken, welche Datums- und Uhrzeitwerte Benutzer auswählen können. Im folgenden Beispiel legen wir 2025-06-01T08:30 als Mindestwert und 2025-06-30T16:30 als Höchstwert fest:

<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="party-date"
  min="2025-06-01T08:30"
  max="2025-06-30T16:30" />

Es können nur Tage im Juni 2025 ausgewählt werden. Je nach Browser lassen sich Uhrzeiten außerhalb der angegebenen Grenzen möglicherweise nicht auswählen. In anderen Browsern können ungültige Datums- und Uhrzeitwerte ausgewählt werden, erfüllen dann aber :invalid und :out-of-range und bestehen die Validierung nicht.

In manchen Browsern (Safari) scheint die Datumsauswahl jedes beliebige Datum zuzulassen. Bei der Auswahl wird der Wert jedoch auf den gültigen Bereich begrenzt.

Der gültige Bereich umfasst alle Zeitpunkte zwischen den Werten von min und max. Die Uhrzeit ist nur am ersten und am letzten Tag des Bereichs eingeschränkt.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das allgemeine <input>-Element und die Schnittstelle HTMLInputElement, mit der es bearbeitet werden kann
• <input type="date"> und <input type="time">
• In HTML verwendete Datums- und Uhrzeitformate
• Anleitung für die Datums- und Uhrzeitauswahl