<input type="datetime-local">

Die Benutzeroberfläche der Steuerung variiert in der Regel von Browser zu Browser. In Browsern ohne Unterstützung, weichen diese elegant zurück, als ob <input type="text"> gesetzt wäre.

Die Steuerung soll ein lokales Datum und eine lokale Zeit darstellen, nicht unbedingt das lokale Datum und die lokale Zeit 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 Zeitzone des Benutzers ungültig ist (wie die eine Stunde innerhalb eines Übergangsgaps der Sommerzeitumstellung).

Ein String, der den Wert des in die Eingabe eingegebenen Datums darstellt. Das Format des Datums- und Zeitwertes, 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 Zeit in das value-Attribut einfügen, 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" />

Ein Punkt, den es zu beachten gilt, ist, dass die angezeigten Datums- und Zeitformate sich von dem tatsächlichen value unterscheiden; das angezeigte Datum und die Uhrzeit sind gemäß der vom Betriebssystem des Benutzers gemeldeten Locale formatiert, während das Datum/Zeit value immer in YYYY-MM-DDTHH:mm formatiert ist. Wenn der obige Wert beispielsweise an den Server übermittelt wird, sieht er so aus: party-date=2024-06-01T08:30.

Sie können den Datumswert auch in JavaScript mit der value-Eigenschaft des HTMLInputElement 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 akzeptierte Datum und die früheste akzeptierte Uhrzeit. Wenn der in das Element eingegebene value später als dieser Zeitstempel ist, schlägt die Element- Constraint-Validierung fehl. Wenn der Wert des max-Attributs kein gültiger String ist, der dem Format YYYY-MM-DDTHH:mm entspricht, hat das Element keinen Höchstwert.

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

Das früheste akzeptierte Datum und die früheste akzeptierte Uhrzeit; Zeitstempel, die früher sind als dieser, führen dazu, dass das Element die Constraint-Validierung nicht besteht. Wenn der Wert des min-Attributs kein gültiger String ist, der dem Format YYYY-MM-DDTHH:mm entspricht, hat das Element keinen Mindestwert.

Dieser Wert muss ein Datum angeben, das früher oder gleich dem durch das 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 dem Grundwert für die Schritte entsprechen (min, falls angegeben, value andernfalls und ein geeigneter Standardwert, falls keiner dieser Werte angegeben ist) sind gültig.

Ein Stringwert von any bedeutet, dass kein Schritt impliziert wird und jeder Wert erlaubt ist (abgesehen von 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 ist). 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 bei der Verwendung mit datetime-local Eingaben bedeutet. Dies wird aktualisiert, sobald diese Informationen verfügbar sind.

Datum/Uhrzeit-Eingaben sind für Entwickler praktisch; 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 der Locale des Benutzers. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Zwingen Sie Ihre Benutzer nicht, Daten einzugeben, die für das Funktionieren Ihrer App nicht erforderlich sind.

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

Ein Aspekt, den der Eingabetyp datetime-local nicht bietet, ist die Möglichkeit, die Zeitzone und/oder das Locale der Datum/Uhrzeit-Steuerung festzulegen. Dies war im Eingabetyp datetime verfügbar, aber dieser Typ ist jetzt veraltet und wurde aus der Spezifikation entfernt. Die Hauptgründe für die Entfernung waren der Mangel an Implementierung in den Browsern und Bedenken hinsichtlich der Benutzeroberfläche/-erfahrung. Es ist einfacher, eine Steuerung (oder Steuerungen) zum Festlegen der Datum/Uhrzeit bereitzustellen und dann das Locale in einer separaten Steuerung zu handhaben.

Zum Beispiel, wenn Sie ein System erstellen, bei dem der Benutzer wahrscheinlich bereits angemeldet ist und sein Locale 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" />

Auf der anderen Seite, wenn Sie es dem Benutzer ermöglichen müssen, eine Zeitzone zusammen mit einer Datum/Uhrzeit-Eingabe einzugeben, könnten Sie ein <select>-Element verwenden, um dem Benutzer das Festlegen der richtigen Zeitzone zu ermöglichen, indem er einen bestimmten Ort aus einer Menge von Orten 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 Zeitzonenwerte als separate Datenpunkte an den Server gesendet 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 Benutzeroberflächenimplementierungen lassen in der Regel nichts anderes als ein Datum/Uhrzeit eingeben – was hilfreich ist – aber es könnte dennoch vorkommen, dass ein Benutzer keinen Wert eingibt und überträgt oder ein ungültiges Datum und/oder eine ungültige Uhrzeit eingibt (z.B. der 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 der Datum/Uhrzeit verpflichtend zu machen. In unterstützenden Browsern wird dann ein Fehler angezeigt, wenn Sie versuchen, ein Datum zu übermitteln, das außerhalb der festgelegten Grenzen liegt oder ein leeres Datumsfeld eingeben.

Lassen Sie uns ein Beispiel betrachten; hier haben wir minimale und maximale Datum/Uhrzeit-Werte gesetzt und das Feld auch verpflichtend 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) zu senden, zeigt der Browser einen Fehler an. Versuchen Sie nun, mit dem Beispiel zu experimentieren:

Hier ist das CSS, das im obigen Beispiel verwendet wird. Hier nutzen wir die :valid und :invalid CSS-Eigenschaften, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir platzieren 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;
}

Die grundlegendste Verwendung von <input type="datetime-local"> umfasst eine Kombination aus einem einfachen <input> und einem <label> Element, wie unten zu sehen:

<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/Zeitangaben einzuschränken, die der Benutzer auswählen kann. Im folgenden Beispiel setzen wir ein Mindestdatum von 2024-06-01T08:30 und ein Höchstdatum von 2024-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="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önnen Zeiten außerhalb der angegebenen Werte möglicherweise nicht ausgewählt werden. In anderen Browsern sind ungültige Daten und Zeiten auswählbar, werden jedoch als :invalid und :out-of-range markiert und scheitern an der Validierung.

In einigen Browsern (Chrome und Edge) wird nur der "Tage"-Teil des Datumswerts bearbeitbar sein, und Daten außerhalb des Juni können nicht gescrollt werden. In anderen (Safari) scheint der Datumsauswahlbereich jede Datumszeit zu erlauben, aber der Wert wird auf den gültigen Bereich geklemmt, 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, die verwendet wird, um es zu manipulieren, HTMLInputElement
• <input type="date"> und <input type="time">
• Verwendete Datums- und Zeitformate in HTML
• Datum- und Zeitpicker-Tutorial
• Kompatibilität von CSS-Eigenschaften