<input type="datetime-local">

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

Die Benutzeroberfläche der Steuerung variiert in der Regel von Browser zu Browser. Die Steuerung soll ein lokales Datum und eine lokale Uhrzeit darstellen, nicht unbedingt das lokale Datum und die lokale Uhrzeit des Benutzers. Mit anderen Worten, die Eingabe erlaubt jede gültige Kombination von Jahr, Monat, Tag, Stunde und Minute – selbst wenn eine solche Kombination in der lokalen Zeitzone des Benutzers ungültig ist (wie die eine Stunde innerhalb einer zeitlichen Umstellung auf Sommerzeit).

Eine Zeichenkette, die den Wert des in das Eingabefeld eingegebenen Datums darstellt. Das Format des Datums- und Uhrzeitwerts, das von diesem Eingabetyp verwendet wird, wird in Lokale Datums- und Zeitzeichenketten beschrieben.

Sie können einen Standardwert für die Eingabe festlegen, indem Sie ein Datum und eine Uhrzeit innerhalb des value-Attributs angeben, so:

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

Ein Punkt, den es zu beachten gilt, ist, dass die angezeigten Datums- und Uhrzeitformate von dem tatsächlichen value abweichen; das angezeigte Datum und die Uhrzeit werden entsprechend der vom Betriebssystem des Benutzers gemeldeten Gebietsschema formatiert, während der Datum/Uhrzeit-value immer im Format YYYY-MM-DDTHH:mm formatiert wird. Wenn der obige Wert beispielsweise an den Server gesendet wird, sieht er so aus: party-date=2024-06-01T08:30.

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

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

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

Das späteste Datum und die späteste Uhrzeit, die akzeptiert werden. Wenn der in das Element eingegebene value später als dieser Zeitstempel ist, schlägt die Einschränkungsvalidierung für das Element fehl. Wenn der Wert des max-Attributs keine gültige Zeichenkette ist, die dem Format YYYY-MM-DDTHH:mm folgt, hat das Element keinen Höchstwert.

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

Das früheste Datum und die früheste Uhrzeit, die akzeptiert werden; Zeitstempel früher als dieser führen dazu, dass das Element die Einschränkungsvalidierung nicht besteht. Wenn der Wert des min-Attributs keine gültige Zeichenkette ist, die dem Format YYYY-MM-DDTHH:mm folgt, hat das Element keinen Mindestwert.

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

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert sich halten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Prinzip für das Abstufen (min, falls angegeben, andernfalls value und ein geeigneter Standardwert, falls keiner dieser Werte bereitgestellt wird) entsprechen, sind gültig.

Ein Zeichenkettenwert von any bedeutet, dass kein Abstufungsprinzip impliziert wird und jeder Wert erlaubt ist (außer anderen Einschränkungen wie min und max).

Für datetime-local-Eingaben wird der Wert von step in Sekunden angegeben, mit einem Skalierungsfaktor von 1000 (da der zugrunde liegende numerische Wert in Millisekunden angegeben wird). Der Standardwert von step ist 60, was 60 Sekunden (oder 1 Minute oder 60.000 Millisekunden) anzeigt.

Zu diesem Zeitpunkt ist unklar, was ein Wert von any für step bedeutet, wenn er mit datetime-local-Eingaben verwendet wird. Diese Informationen werden aktualisiert, sobald sie bekannt sind.

Datum/Uhrzeit-Eingaben sind für den Entwickler praktisch; sie bieten eine einfache Benutzeroberfläche zum Wählen von Daten und Uhrzeiten und sie normalisieren das an den Server gesendete Datenformat, unabhängig vom Gebietsschema des Benutzers. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Verlangen Sie nicht von Ihren Benutzern, Daten einzugeben, die für das Funktionieren Ihrer App nicht benötigt werden.

<input type="datetime-local"> unterstützt keine Formsteuerungsgrößenattribute wie size. Sie müssen CSS verwenden, um die Größen dieser Elemente anzupassen.

Eine Sache, die der datetime-local Eingabetyp nicht bietet, ist die Möglichkeit, die Zeitzone und/oder das Gebietsschema der Datum/Uhrzeit-Steuerung festzulegen. Dies war im datetime Eingabetyp verfügbar, dieser Typ ist jedoch veraltet und wurde aus der Spezifikation entfernt. Die Hauptgründe dafür, dass dies entfernt wurde, sind mangelnde Implementierung in Browsern und Bedenken hinsichtlich der Benutzeroberfläche/Erfahrung. Es ist einfacher, nur eine Steuerung (oder Steuerungen) zum Einstellen von Datum/Uhrzeit zu haben und dann mit dem Gebietsschema in einer separaten Steuerung umzugehen.

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

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

Andererseits, wenn Sie es erforderlich machen müssten, dass der Benutzer eine Zeitzone zusammen mit einer Datum/Uhrzeit-Eingabe eingibt, könnten Sie ein <select>-Element haben, mit dem der Benutzer durch Auswahl eines bestimmten Ortes aus einer Menge von Standorten die richtige Zeitzone einstellen 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 Datum/Uhrzeit- und Zeitzonenwerte als separate Datenpunkte an den Server übermittelt, und Sie müssten diese dann entsprechend in der Datenbank auf der Serverseite speichern.

Standardmäßig führt <input type="datetime-local"> keine Validierung der eingegebenen Werte durch. Die Implementierung der Benutzeroberfläche lässt in der Regel nichts anderes als ein Datum/Uhrzeit zu — was hilfreich ist — aber ein Benutzer könnte dennoch keinen Wert eingeben und 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 Festlegen von maximalen und minimalen Daten), und Sie können das required-Attribut verwenden, um das Ausfüllen von Datum/Uhrzeit verpflichtend zu machen. Infolgedessen zeigen Browser einen Fehler an, wenn Sie versuchen, ein Datum, das außerhalb der gesetzten Grenzen liegt, oder ein leeres Datumsfeld abzusenden.

Sehen wir uns ein Beispiel an; hier haben wir minimale und maximale Datums-/Uhrzeitwerte festgelegt und das Feld auch erforderlich gemacht:

<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. Hier nutzen wir die :valid und :invalid CSS-Eigenschaften, um die Eingabe basierend darauf zu formatieren, ob der aktuelle Wert gültig ist. Wir setzen die Symbole 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;
}

Die einfachste Verwendung von <input type="datetime-local"> umfasst eine einfache <input>- und <label>-Element-Kombination, wie unten gezeigt:

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

Sie können die Attribute min und max verwenden, um die Daten/Uhrzeiten einzuschränken, die der Benutzer wählen kann. Im folgenden Beispiel legen wir ein minimales Datum von 2025-06-01T08:30 und ein maximales Datum 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>

Nur Tage im Juni 2025 können ausgewählt werden. Abhängig von dem verwendeten Browser können Zeiten außerhalb der angegebenen Werte möglicherweise nicht ausgewählt werden. In anderen Browsern sind ungültige Daten und Zeiten auswählbar, aber sie werden :invalid und :out-of-range entsprechen und die Validierung nicht bestehen.

In einigen Browsern (Chrome und Edge) ist nur der "Tage"-Teil des Datumswerts bearbeitbar, und Daten außerhalb des Juni können nicht gescrollt werden. In anderen (Safari) erscheint der Datumsauswahldialog so, als ob jedes Datum ausgewählt werden könnte, aber der Wert wird beim Auswählen eines Datums auf den gültigen Bereich beschränkt.

Der gültige Bereich umfasst alle Zeiten zwischen den min- und max-Werten; die Tageszeit ist nur an den ersten und letzten Daten im Bereich eingeschränkt.

• Das generische <input>-Element und die Schnittstelle, um es zu manipulieren, HTMLInputElement
• <input type="date"> und <input type="time">
• Datum- und Zeitformate, die in HTML verwendet werden
• Datum- und Uhrzeit-Auswahl Tutorial