<input type="datetime-local">

Die Benutzeroberfläche des Steuerelements variiert in der Regel von Browser zu Browser. In Browsern, die keine Unterstützung bieten, werden diese so degradiert, als wäre <input type="text"> festgelegt.

Das Steuerelement soll ein lokales Datum und eine lokale Uhrzeit darstellen, nicht unbedingt das lokale Datum und die lokale Uhrzeit des Benutzers. Anders gesagt, die Eingabe erlaubt jede gültige Kombination aus Jahr, Monat, Tag, Stunde und Minute – auch wenn eine solche Kombination in der lokalen Zeitzone des Benutzers ungültig ist (wie zum Beispiel die Stunde innerhalb einer Sommerzeit-Umstellungslücke).

Ein String, der den Wert des in die Eingabe eingegebenen Datums darstellt. Das Format des Datums- und Uhrzeitwerts, 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 innerhalb des value-Attributs 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" />

Eine Sache zu beachten ist, dass sich die angezeigten Datums- und Uhrzeitformate von dem tatsächlichen value unterscheiden; das angezeigte Datum und die Zeit sind entsprechend der Benutzersprache formatiert, wie sie vom Betriebssystem gemeldet wird, während der Datum/Uhrzeit-value immer im Format YYYY-MM-DDTHH:mm formatiert ist. Wenn der obige Wert beispielsweise an den Server gesendet wird, sieht er folgendermaßen aus: party-date=2024-06-01T08:30.

Sie können den Datumswert auch in JavaScript mit der HTMLInputElement-value-Eigenschaft 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 zu akzeptierende Datum und die späteste Uhrzeit. Wenn das 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, hat das Element keinen Höchstwert.

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

Das früheste zu akzeptierende Datum und die früheste Uhrzeit; Zeitstempel, die früher sind als dieser, 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, hat das Element keinen Mindestwert.

Dieser Wert muss ein Datumsstring angeben, der früher oder gleich dem 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 gleich dem Basiswert für das Schrittmachen sind (min, falls angegeben, ansonsten das value und ein entsprechender Standardwert, falls keine dieser Angaben gemacht wird), sind gültig.

Ein String-Wert von any bedeutet, dass keine Schrittfolge impliziert wird, und jeder Wert ist erlaubt (abzüglich anderer Einschränkungen, wie min und max).

Bei 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) bedeutet.

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

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

<input type="datetime-local"> unterstützt keine Form-Steuergrößenattribute wie size. Sie müssen auf CSS zurückgreifen, 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 Sprache des Datum/Uhrzeit-Steuerelements festzulegen. Dies war im datetime-Eingabetyp möglich, aber dieser Typ ist jetzt obsolet und wurde aus der Spezifikation entfernt. Die Hauptgründe für die Entfernung waren ein Mangel an Implementierung in Browsern und Bedenken über die Benutzeroberfläche/-erfahrung. Es ist einfacher, ein Steuerelement (oder mehrere) zur Einstellung des Datum/Uhrzeits bereitzustellen und sich dann in einem separaten Steuerelement mit der Sprache zu befassen.

Wenn Sie zum Beispiel ein System erstellen, bei dem der Benutzer wahrscheinlich bereits angemeldet ist und seine Sprache 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 zulassen müssen, dass der Benutzer eine Zeitzone zusammen mit einer Datum/Uhrzeit-Eingabe eingibt, könnten Sie ein <select>-Element bereitstellen, damit der Benutzer die richtige Zeitzone durch Auswahl eines bestimmten Standorts aus einer Gruppe von Standorten 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 jedem Fall würden die Datum/Uhrzeit- und Zeitzonenwerte als separate Datenpunkte an den Server übermittelt und müssten dann serverseitig entsprechend in der Datenbank gespeichert werden.

Standardmäßig wendet <input type="datetime-local"> keine Validierung auf eingegebene Werte an. Die Implementierungen der Benutzeroberfläche lassen in der Regel nicht zu, dass irgendetwas anderes als ein Datum/Uhrzeit eingegeben wird – was hilfreich ist – aber ein Benutzer könnte immer noch keinen Wert eingeben und absenden oder ein ungültiges Datum und/oder eine ungültige Zeit (z. B. der 32. April) eingeben.

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 die Eingabe von Datum/Uhrzeit obligatorisch zu machen. Infolgedessen zeigen unterstützende Browser einen Fehler an, wenn Sie versuchen, ein Datum abzusenden, das außerhalb der festgelegten Grenzen liegt, oder ein leeres Datumsfeld.

Schauen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstwert für Datum/Uhrzeit festgelegt und auch das Feld 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) abzuschicken, zeigt der Browser einen Fehler an. Versuchen Sie jetzt, mit dem Beispiel zu spielen:

Hier ist das CSS, das im obigen Beispiel verwendet wurde. Hier verwenden wir die :valid- und :invalid-CSS-Eigenschaften, um die Eingabe basierend auf darauf, ob der aktuelle Wert gültig ist, zu stylen. Wir setzen die Symbole auf ein <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 grundlegendste Verwendung von <input type="datetime-local"> beinhaltet eine grundlegende 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>

Sie können die min- und max-Attribute verwenden, um die Daten/Zeiten einzuschränken, die vom Benutzer ausgewählt werden können. Im folgenden Beispiel legen wir ein Minimum von 2024-06-01T08:30 und ein Maximum 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>

Es können nur Tage im Juni 2024 ausgewählt werden. Abhängig davon, welchen Browser Sie verwenden, sind Zeiten außerhalb der angegebenen Werte möglicherweise nicht auswählbar. In anderen Browsern sind ungültige Daten und Zeiten auswählbar, aber sie stimmen mit :invalid und :out-of-range überein und werden bei der Validierung fehlschlagen.

In einigen Browsern (Chrome und Edge) wird nur der "Tage"-Teil des Datum-Werts bearbeitbar sein, und Daten außerhalb des Junis können nicht gescrollt werden. In anderen (Safari) scheint der Datumsauswähler jedes Datum zuzulassen, aber der Wert wird bei Auswahl eines Datums auf den gültigen Bereich geklammert.

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, mit der es manipuliert wird, HTMLInputElement
• <input type="date"> und <input type="time">
• Datum- und Zeitformate, die in HTML verwendet werden
• Datum und Uhrzeit Auswahl-Tutorial