<input type="datetime-local">

Die Benutzeroberfläche des Steuerelements variiert im Allgemeinen von Browser zu Browser. Das Steuerelement ist dazu gedacht, ein lokales Datum und eine lokale Uhrzeit darzustellen, 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 – auch wenn eine solche Kombination in der lokalen Zeitzone des Benutzers ungültig ist (wie die eine Stunde innerhalb einer Lücke beim Wechsel zur Sommerzeit).

Ein String, der den Wert des in das Eingabefeld eingegebenen Datums darstellt. Das Format des Datums- und Uhrzeitwerts, der von diesem Eingabetyp verwendet wird, wird in Lokalen Datums- und Zeitstrings beschrieben.

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

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

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

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

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

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

Das späteste akzeptierte Datum und die Uhrzeit. Wenn der in das Element eingegebene value später als dieser Zeitstempel ist, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs kein gültiger String ist, der dem Format YYYY-MM-DDTHH:mm folgt, dann hat das Element keinen Maximalwert.

Dieser Wert muss ein Datum spezifizieren, das später oder gleich dem im min-Attribut angegebenen ist.

Das früheste akzeptierte Datum und die Uhrzeit; Zeitstempel vor diesem Wert führen dazu, dass das Element bei der Einschränkungsvalidierung fehlschlägt. Wenn der Wert des min-Attributs kein gültiger String ist, der dem Format YYYY-MM-DDTHH:mm folgt, dann hat das Element keinen Minimalwert.

Dieser Wert muss ein Datum spezifizieren, das früher oder gleich dem im max-Attribut angegebenen ist.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder den speziellen Wert any, der unten beschrieben wird. Nur Werte, die gleich der Grundlage für das Schrittverhalten sind (min falls angegeben, andernfalls value und ein geeigneter Standardwert, wenn keiner von beiden angegeben ist), sind gültig.

Ein String-Wert von any bedeutet, dass kein Schrittverhalten 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 ist). Der Standardwert von step ist 60, was 60 Sekunden (oder 1 Minute, oder 60.000 Millisekunden) bedeutet.

Zu diesem Zeitpunkt ist unklar, was ein Wert von any für step bedeutet, wenn er mit datetime-local Eingaben verwendet wird. Dies wird aktualisiert, sobald diese Information vorliegt.

Datum/Uhrzeit-Eingaben sind für den Entwickler praktisch; sie bieten eine einfache Benutzeroberfläche zur Auswahl von Daten und Uhrzeiten und normalisieren das an den Server gesendete Datenformat, unabhängig von der Benutzersprache. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Verlangen Sie nicht, dass Ihre Benutzer Daten eingeben, die für das Funktionieren Ihrer Anwendung nicht benötigt werden.

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

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

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

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

Andernfalls, wenn Sie dem Benutzer erlauben müssten, eine Zeitzone zusammen mit einer Datums-/Uhrzeiteingabe einzugeben, könnten Sie ein <select>-Element haben, mit dem der Benutzer die richtige Zeitzone auswählen kann, indem er einen bestimmten Standort aus einer Reihe von Standorten auswählt:

<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, und Sie müssten sie dann ordnungsgemäß in der Datenbank auf der Serverseite speichern.

Standardmäßig wendet <input type="datetime-local"> keine Validierung auf eingegebene Werte an. Die Implementierungen der Benutzeroberfläche lassen im Allgemeinen keine Eingaben zu, die kein Datum/Uhrzeit sind – was hilfreich ist – aber ein Benutzer könnte trotzdem keinen Wert eingeben und ihn senden, 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 des Datums/Uhrzeit-Felds obligatorisch zu machen. Infolgedessen zeigen Browser einen Fehler an, wenn Sie versuchen, ein Datum außerhalb der festgelegten Grenzen oder ein leeres Datumsfeld zu senden.

Schauen wir uns ein Beispiel an; hier haben wir minimale und maximale Werte für Datum/Uhrzeit gesetzt 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 mit dem Beispiel herum:

Hier ist das CSS, das im obigen Beispiel verwendet wurde. Hier verwenden wir die :valid und :invalid CSS-Eigenschaften, um das Eingabefeld basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir positionieren die Symbole auf einem <span> 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;
}

Der grundlegendste Gebrauch von <input type="datetime-local"> beinhaltet eine einfache Kombination aus <input> und <label> Element, 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 min und max Attribute verwenden, um die Auswahl der vom Benutzer wählbaren Daten/Zeitpunkte einzuschränken. Im folgenden Beispiel setzen wir ein Mindestdatum von 2025-06-01T08:30 und ein Höchstdatum von 2025-06-30T16:30:

<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. Je nachdem, welchen Browser Sie verwenden, sind möglicherweise Zeiten außerhalb der angegebenen Werte nicht auswählbar. In anderen Browsern sind ungültige Daten und Zeiten auswählbar, aber sie entsprechen :invalid und :out-of-range und schlagen bei der Validierung fehl.

In einigen Browsern (Chrome und Edge) ist nur der „Tage“-Teil des Datumswerts bearbeitbar, und Daten außerhalb des Junis können nicht durchsucht werden. In anderen (Safari) scheint der Datumsauswähler jedes Datum zuzulassen, aber der Wert wird auf den gültigen Bereich geklammert, wenn ein Datum ausgewählt wird.

Der gültige Bereich umfasst alle Zeiten zwischen den min- und max-Werten; die Tageszeit wird nur an den ersten und letzten Tagen des Bereichs eingeschränkt.

• Das generische <input>-Element und die Schnittstelle, die zur Manipulation verwendet wird, HTMLInputElement
• <input type="date"> und <input type="time">
• In HTML verwendete Datums- und Zeitformate
• Leitfaden zur Verwendung von Datums- und Uhrzeitfeldern