<input type="datetime-local">

Die Benutzeroberfläche des Steuerelements variiert im Allgemeinen von Browser zu Browser. In Browsern ohne Unterstützung fallen diese Steuerelemente elegant auf einfache <input type="text"> Steuerelemente zurück.

Das Steuerelement ist dazu gedacht, ein lokales Datum und eine lokale Uhrzeit darzustellen, nicht unbedingt das lokale Datum und die lokale Uhrzeit des Benutzers. Anders ausgedrückt, die Eingabe ermöglicht 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 Stunde innerhalb einer Zeitumstellung im Frühjahr).

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

Sie können einen Standardwert für die Eingabe festlegen, indem Sie ein Datum und eine Uhrzeit im value-Attribut angeben, wie folgt:

<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 die angezeigten Datums- und Zeitformate sich vom tatsächlichen value unterscheiden; das angezeigte Datum und die Uhrzeit werden gemäß den lokalen Einstellungen des Nutzers formatiert, während das Datum/Zeit value immer im Format YYYY-MM-DDTHH:mm vorliegt. Wenn der obige Wert beispielsweise an den Server übermittelt wird, sieht er wie party-date=2024-06-01T08:30 aus.

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

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

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

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

Dieser Wert muss ein Datum später oder gleich dem im min-Attribut angegebenen Wert angeben.

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

Dieser Wert muss ein Datum früher oder gleich dem im max-Attribut angegebenen Wert angeben.

Das step-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder den speziellen Wert any, der unten beschrieben wird. Nur Werte, die gleich dem Ausgangspunkt für den Schritt sind (min, falls angegeben, ansonsten value und ein geeigneter Standardwert, falls keiner von beiden angegeben ist), sind gültig.

Ein String-Wert von any bedeutet, dass keine Schrittweite impliziert ist, und jeder Wert ist erlaubt (unter Berücksichtigung anderer 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 vorliegt). 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 so bald wie möglich aktualisiert, sobald diese Information feststeht.

Datum/Uhrzeit-Eingaben sind für den Entwickler bequem; sie bieten eine einfache Benutzeroberfläche zum Auswählen von Daten und Zeiten und normalisieren das Datenformat, das an den Server gesendet wird, unabhängig von den lokalen Einstellungen des Benutzers. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Fordern Sie nicht von Ihren Benutzern, Daten einzugeben, die für die Funktion Ihrer App nicht benötigt werden.

<input type="datetime-local"> unterstützt keine Formsteuerelementsgröß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 eine Möglichkeit, die Zeitzone und/oder die lokale Einstellung des Datum/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 waren ein Mangel an Implementierung in den Browsern und Bedenken bezüglich der Benutzeroberfläche/-erfahrung. Es ist einfacher, nur ein Steuerelement (oder Steuerelemente) zur Einstellung des Datum/Uhrzeit zu haben und dann mit der lokalen Einstellung in einem separaten Steuerelement umzugehen.

Zum Beispiel, wenn Sie ein System erstellen, in dem der Benutzer wahrscheinlich bereits angemeldet ist und seine lokale Einstellung 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 erforderlich wären, dem Benutzer zu ermöglichen, eine Zeitzone zusammen mit einer Datum/Uhrzeit-Eingabe einzugeben, könnten Sie ein <select>-Element haben, um dem Benutzer zu ermöglichen, die richtige Zeitzone auszuwählen, 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 Datum/Uhrzeit und die Zeitzonenwerte als separate Datenpunkte an den Server übermittelt, und Sie müssten sie entsprechend 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 nichts anderes als Datum/Zeit-Eingaben zu – was hilfreich ist – aber ein Benutzer könnte immer noch keinen Wert ausfüllen 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 Maximale und minimale Daten einstellen), und Sie können das required-Attribut verwenden, um das Ausfüllen des Datum/Uhrzeit-Eingabefeldes obligatorisch zu machen. In unterstützenden Browsern wird ein Fehler angezeigt, wenn Sie versuchen, ein Datum einzugeben, das außerhalb der festgelegten Grenzen liegt, oder ein leeres Datum-Feld einzureichen.

Sehen wir uns ein Beispiel an; hier haben wir minimale und maximale Datum/Uhrzeit-Werte festgelegt und das Feld ebenfalls 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 einem Datum außerhalb der festgelegten Grenzen) abzusenden, zeigt der Browser einen Fehler an. Versuchen Sie nun, mit dem Beispiel zu spielen:

Hier ist das CSS, das im obigen Beispiel verwendet wird. Hier verwenden wir die :valid und :invalid CSS-Eigenschaften, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir platzieren 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 grundlegende 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 von den Benutzern auswählbaren Daten/Zeitpunkte einzuschränken. Im folgenden Beispiel legen wir ein Mindestdatum von 2024-06-01T08:30 und ein Höchstdatum von 2024-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="2024-06-01T08:30"
    max="2024-06-30T16:30" />
</form>

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

In einigen Browsern (Chrome und Edge) ist der "Tage"-Teil des Datumwerts nur bearbeitbar, und Daten außerhalb des Juni können nicht gescrollt werden. In anderen (Safari) erscheint der Datumsauswahlkalender, um jedes Datum zu ermöglichen, aber der Wert wird auf den gültigen Bereich abgestimmt, wenn ein Datum ausgewählt wird.

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 zur Manipulation, HTMLInputElement
• <input type="date"> und <input type="time">
• Datum- und Zeitformate in HTML
• Leitfaden zum Datum- und Zeitpicker
• Kompatibilität von CSS-Eigenschaften