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

Eine Zeichenfolge, die den Wert des in die Eingabe eingegebenen Datums darstellt. Das Format des von diesem Eingabetyp verwendeten Datums- und Uhrzeitwerts wird unter Lokale Datums- und Uhrzeitzeichenfolgen beschrieben.

Sie können einen Standardwert für die Eingabe festlegen, indem Sie ein Datum und eine Uhrzeit im Attribut value 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" />

Zu beachten ist, dass sich die angezeigten Datums- und Uhrzeitformate vom tatsächlichen value unterscheiden: Das angezeigte Datum und die angezeigte Uhrzeit werden entsprechend dem vom Betriebssystem gemeldeten Gebietsschema des Benutzers formatiert, während der Datums-/Uhrzeit-value immer im Format YYYY-MM-DDTHH:mm formatiert wird. Wenn der obige Wert beispielsweise an den Server übermittelt wird, sieht er wie folgt aus: party-date=2024-06-01T08:30.

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

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

Zusätzliche Attribute

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

max

Das späteste akzeptierte Datum und die späteste akzeptierte Uhrzeit. Wenn der in das Element eingegebene value später als dieser Zeitstempel ist, schlägt für das Element die Einschränkungsvalidierung fehl. Wenn der Wert des Attributs max keine gültige Zeichenfolge im Format YYYY-MM-DDTHH:mm ist, hat das Element keinen Maximalwert.

Dieser Wert muss eine Datumszeichenfolge angeben, die später als oder gleich der durch das Attribut min angegebenen ist.

min

Das früheste akzeptierte Datum und die früheste akzeptierte Uhrzeit; frühere Zeitstempel führen dazu, dass für das Element die Einschränkungsvalidierung fehlschlägt. Wenn der Wert des Attributs min keine gültige Zeichenfolge im Format YYYY-MM-DDTHH:mm ist, hat das Element keinen Minimalwert.

Dieser Wert muss eine Datumszeichenfolge angeben, die früher als oder gleich der durch das Attribut max angegebenen ist.

step

Das Attribut step ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder der weiter unten beschriebene spezielle Wert any. Nur Werte, die eine ganze Anzahl von Schritten von der Schrittbasis entfernt sind, sind gültig. Die Schrittbasis ist min, falls angegeben, andernfalls value oder 0 (die Unix-Epoche, 1970-01-01T00:00), wenn keines von beiden angegeben ist.

Für datetime-local-Eingaben wird der Wert von step in Sekunden angegeben und als Anzahl von Millisekunden behandelt, die dem 1000-Fachen des step-Werts entspricht (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 60 und entspricht 1 Minute.

Ein Zeichenfolgenwert von any bedeutet, dass keine Schrittweite impliziert wird und jeder Wert zulässig ist (abgesehen von anderen Einschränkungen wie min und max). Tatsächlich hat dies für datetime-local-Eingaben dieselbe Wirkung wie 60, da die Auswahloberfläche in diesem Fall nur die Auswahl ganzer Minuten erlaubt.

Verwendung von datetime-local-Eingaben

Datums-/Uhrzeiteingaben sind für Entwickler praktisch; sie bieten eine einfache Benutzeroberfläche zum Auswählen von Daten und Uhrzeiten und normalisieren das an den Server gesendete Datenformat unabhängig vom Gebietsschema des Benutzers. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Fordern Sie Ihre Benutzer nicht dazu auf, Daten einzugeben, die für die Funktion Ihrer Anwendung nicht erforderlich sind.

Eingabegröße steuern

<input type="datetime-local"> unterstützt keine Attribute zur Größenanpassung von Formularsteuerelementen wie size. Sie müssen für die Anpassung der Größen dieser Elemente auf CSS zurückgreifen.

Zeitzonen festlegen

Eine Funktion, die der Eingabetyp datetime-local nicht bereitstellt, ist die Möglichkeit, die Zeitzone und/oder das Gebietsschema des Datums-/Uhrzeit-Steuerelements festzulegen. Dies war im Eingabetyp datetime verfügbar, aber dieser Typ ist inzwischen veraltet und wurde aus der Spezifikation entfernt. Die Hauptgründe für seine Entfernung sind die fehlende Implementierung in Browsern und Bedenken hinsichtlich der Benutzeroberfläche und Benutzererfahrung. Es ist einfacher, lediglich ein Steuerelement (oder mehrere Steuerelemente) zum Festlegen des Datums/der Uhrzeit zu haben und das Gebietsschema dann in einem separaten Steuerelement zu behandeln.

Wenn Sie beispielsweise ein System erstellen, bei dem der Benutzer wahrscheinlich bereits angemeldet ist und sein Gebietsschema bereits festgelegt wurde, könnten Sie die Zeitzone in einem Eingabetyp hidden bereitstellen. Zum Beispiel:

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

Wenn Sie hingegen dem Benutzer erlauben müssen, zusammen mit einer Datums-/Uhrzeiteingabe eine Zeitzone einzugeben, könnten Sie ein <select>-Element verwenden, damit der Benutzer die richtige Zeitzone durch Auswahl eines bestimmten Orts aus einer Reihe von Orten festlegen kann:

<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 würden die Datums-/Uhrzeit- und Zeitzonenwerte als separate Datenpunkte an den Server übermittelt. Anschließend müssten Sie sie auf der Serverseite entsprechend in der Datenbank speichern.

Validierung

Standardmäßig wendet <input type="datetime-local"> keine Validierung auf eingegebene Werte an. Die Implementierungen der Benutzeroberfläche erlauben im Allgemeinen nicht die Eingabe von etwas anderem als einem Datum/einer Uhrzeit – was hilfreich ist –, ein Benutzer könnte jedoch trotzdem keinen Wert eingeben und das Formular absenden oder ein ungültiges Datum und/oder eine ungültige Uhrzeit eingeben (z. B. den 32. April).

Sie können min und max verwenden, um die verfügbaren Daten einzuschränken (siehe Maximale und minimale Daten und Uhrzeiten festlegen), und Sie können das Attribut required verwenden, um die Eingabe des Datums/der Uhrzeit verpflichtend zu machen. Dadurch zeigen Browser einen Fehler an, wenn Sie versuchen, ein Datum außerhalb der festgelegten Grenzen oder ein leeres Datumsfeld abzusenden.

Sehen wir uns ein Beispiel an: Hier haben wir minimale und maximale Datums-/Uhrzeitwerte festgelegt und das Feld außerdem als erforderlich markiert:

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

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

Hier ist das im obigen Beispiel verwendete CSS. Wir verwenden hier die CSS-Eigenschaften :valid und :invalid, um die Eingabe abhängig davon zu gestalten, ob der aktuelle Wert gültig ist. Die Symbole platzieren wir auf einem <span> neben der Eingabe.

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 grundlegendste Verwendung von <input type="datetime-local"> umfasst eine einfache Kombination aus <input>- und <label>-Element, wie unten dargestellt:

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

Maximale und minimale Daten und Uhrzeiten festlegen

Sie können die Attribute min und max verwenden, um die Daten/Uhrzeiten einzuschränken, die der Benutzer auswählen kann. Im folgenden Beispiel legen wir eine minimale Datums-/Uhrzeitangabe von 2025-06-01T08:30 und eine maximale Datums-/Uhrzeitangabe von 2025-06-30T16:30 fest:

<form>
  <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" />
</form>

Es können nur Tage im Juni 2025 ausgewählt werden. Abhängig davon, welchen Browser Sie verwenden, können Uhrzeiten außerhalb der angegebenen Werte möglicherweise nicht ausgewählt werden. In anderen Browsern sind ungültige Daten und Uhrzeiten auswählbar, entsprechen aber :invalid und :out-of-range und bestehen die Validierung nicht.

In einigen Browsern (Safari) scheint die Datumsauswahl jedes Datum zu erlauben, aber der Wert wird beim Auswählen eines Datums auf den gültigen Bereich begrenzt.

Der gültige Bereich umfasst alle Uhrzeiten zwischen den Werten min und max; die Tageszeit ist nur am ersten und letzten Datum im Bereich eingeschränkt.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das allgemeine <input>-Element und die zum Bearbeiten verwendete Schnittstelle HTMLInputElement
• <input type="date"> und <input type="time">
• In HTML verwendete Datums- und Uhrzeitformate
• Tutorial zur Datums- und Uhrzeitauswahl