<input>-Elemente des Typsdatetime-local erzeugen Eingabesteuerungen, die es dem Benutzer ermöglichen, sowohl ein Datum als auch eine Uhrzeit einfach einzugeben, einschließlich Jahr, Monat und Tag sowie die Zeit in Stunden und Minuten.

Probieren Sie es aus

<label for="meeting-time">Choose a time for your appointment:</label><input  type="datetime-local"   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 im Allgemeinen von Browser zu Browser. Die Steuerung sollein lokales Datum und eine lokale Uhrzeit darstellen, nicht unbedingtdas lokale Datum und die lokale Uhrzeit des Benutzers. Mit anderen Worten, die Eingabe erlaubt jede gültige Kombination aus 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 der Zeitumstellung im Frühjahr).

Wert

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

Sie können einen Standardwert für die Eingabe festlegen, indem Sie ein Datum und eine Uhrzeit in dasvalue-Attribut einfügen, wie folgt:

<label for="party">Enter a date and time for your party booking:</label><input   type="datetime-local"  name="party-date"  value="2017-06-01T08:30" />

Eines zu beachten ist, dass sich die angezeigten Datums- und Zeitformate vom tatsächlichenvalue unterscheiden; die angezeigten Daten und Zeiten werden gemäß der vom Betriebssystem des Benutzers gemeldeten lokalen Einstellungen formatiert, während der Datum/Zeit-value immer im FormatYYYY-MM-DDTHH:mm formatiert ist. Wenn der obige Wert beispielsweise an den Server übermittelt wird, sieht er aus wieparty-date=2024-06-01T08:30.

Sie können den Datumwert auch in JavaScript mithilfe dervalue-Eigenschaft desHTMLInputElement abrufen und festlegen, zum Beispiel:

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

Zusätzliche Attribute

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

max

Das späteste akzeptierte Datum und die späteste Zeit. Wenn der eingegebenevalue später als dieser Zeitstempel ist, schlägt das Element bei derConstraint-Validierung fehl. Wenn der Wert desmax-Attributs kein gültiger String ist, der dem FormatYYYY-MM-DDTHH:mm folgt, hat das Element keinen Maximalwert.

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

min

Das früheste akzeptierte Datum und die früheste Zeit; Zeitstempel, die früher sind, führen dazu, dass das Element bei derConstraint-Validierung fehlschlägt. Wenn der Wert desmin-Attributs kein gültiger String ist, der dem FormatYYYY-MM-DDTHH:mm folgt, hat das Element keinen Minimalwert.

Dieser Wert muss ein Datumsstring angeben, der früher oder gleich dem immax-Attribut angegebenen ist.

step

Dasstep-Attribut ist eine Zahl, die festlegt, wie grob der Wert sein muss, oder der spezielle Wertany, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Basiswert entfernt sind, sind gültig. Der Basiswert istmin, wenn angegeben, sonstvalue, oder0 (der Unix-Epoch,1970-01-01T00:00), wenn keiner angegeben ist.

Fürdatetime-local-Eingaben wird der Wert vonstep in Sekunden angegeben und als Anzahl von Millisekunden behandelt, die demstep-Wert mal 1000 entspricht (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 60, was 1 Minute entspricht.

Ein Stringwert vonany bedeutet, dass kein Step angegeben ist und jeder Wert erlaubt ist (außer anderen Einschränkungen, wiemin undmax). Tatsächlich hat es die gleiche Wirkung wie60 fürdatetime-local-Eingaben, da die Auswahl-UI in diesem Fall nur ganze Minuten zulässt.

Verwendung von datetime-local-Eingaben

Datum/Uhrzeit-Eingaben sind für den Entwickler praktisch; sie bieten eine einfache Benutzeroberfläche zur Auswahl von Datum und Uhrzeit und normalisieren das an den Server gesendete Datenformat, unabhängig von der lokalen Einstellung des Benutzers. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Fordern Sie Ihre Benutzer nicht auf, Daten einzugeben, die für die Funktion Ihrer App nicht erforderlich sind.

Steuerung der Eingabegröße

<input type="datetime-local"> unterstützt keine Größenattribute von Formularsteuerelementen wiesize. Sie müssen aufCSS zurückgreifen, um die Größen dieser Elemente anzupassen.

Festlegen von Zeitzonen

Eine Sache, die der Eingabetypdatetime-local nicht bietet, ist eine Möglichkeit, die Zeitzone und/oder das Gebietsschema der Datum/Uhrzeit-Steuerung festzulegen. Dies war im Input-Typdatetime verfügbar, aber dieser Typ ist jetzt obsolet und wurde aus der Spezifikation entfernt. Die Hauptgründe dafür waren ein Mangel an Implementierung in den Browsern und Bedenken hinsichtlich der Benutzeroberfläche/Benutzererfahrung. Es ist einfacher, einfach eine Steuerung (oder Steuerungen) für das Festlegen des Datums/Uhrzeit zu haben und dann das Gebietsschema in einer separaten Steuerung zu behandeln.

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

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

Auf der anderen Seite, wenn Sie den Benutzer zwingen müssen, eine Zeitzone zusammen mit einer Datum/Uhrzeit-Eingabe einzugeben, könnten Sie ein<select>-Element haben, um es dem Benutzer zu ermöglichen, die richtige Zeitzone auszuwählen, indem Sie einen bestimmten Ort aus einer Reihe von Standorten auswählen:

<select name="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 entsprechend in der Datenbank auf der Serverseite gespeichert werden.

Validierung

Standardmäßig wendet<input type="datetime-local"> keine Validierung auf eingegebene Werte an. Die Implementierungen der Benutzeroberfläche lassen im Allgemeinen nicht zu, dass man etwas eingibt, das kein Datum/Uhrzeit ist - was hilfreich ist - aber ein Benutzer könnte immer noch keinen Wert eingeben und versuchen zu senden oder ein ungültiges Datum und/oder eine ungültige Zeit eingeben (z.B. den 32. April).

Sie könnenmin undmax verwenden, um die verfügbaren Daten einzuschränken (sieheFestlegen von maximalen und minimalen Daten), und Sie können dasrequired-Attribut verwenden, um das Ausfüllen des Datums/Uhrzeits als erforderlich zu machen. Infolgedessen zeigen Browser einen Fehler an, wenn Sie versuchen, ein Datum zu übermitteln, das außerhalb der festgelegten Grenzen liegt oder ein leeres Datumsfeld ist.

Schauen wir uns ein Beispiel an; hier haben wir minimale und maximale Datum/Uhrzeit-Werte festgelegt und das Feld auch 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           type="datetime-local"      name="party-date"      min="2017-06-01T08:30"      max="2017-06-30T16:30"      required />    <span></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) zu übermitteln, zeigt der Browser einen Fehler an. Versuchen Sie jetzt, mit dem Beispiel zu spielen:

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

Beispiele

Grundlegende Verwendungen von datetime-local

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

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

Festlegen von maximalen und minimalen Daten und Zeiten

Sie können diemin- undmax-Attribute verwenden, um die vom Benutzer wählbaren Daten/Zeit zu beschränken. Im folgenden Beispiel setzen wir ein Mindestdatum/Uhrzeit von2025-06-01T08:30 und ein Höchstdatum/Uhrzeit von2025-06-30T16:30:

<form>  <label for="party">Enter a date and time for your party booking:</label>  <input       type="datetime-local"    name="party-date"    min="2025-06-01T08:30"    max="2025-06-30T16:30" /></form>

Es können nur Tage im Juni 2025 ausgewählt werden. Abhängig vom verwendeten Browser sind Zeiten, die außerhalb der festgelegten Werte liegen, möglicherweise nicht wählbar. In anderen Browsern sind ungültige Daten und Zeiten wählbar, aber sie entsprechen:invalid und:out-of-range und werden dieValidierung nicht bestehen.

In einigen Browsern (Safari) scheint der Datepicker jedes Datum zu erlauben, aber der Wert wird auf den gültigen Bereich begrenzt, wenn ein Datum ausgewählt wird.

Der gültige Bereich umfasst alle Zeiten zwischen denmin- undmax-Werten; der Zeitpunkt des Tages ist nur an den ersten und letzten Tagen im Bereich beschränkt.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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