<input>-Elemente vom Typdatetime-local erzeugen Eingabesteuerelemente, mit denen der Benutzer einfach sowohl ein Datum als auch eine Uhrzeit eingeben kann, einschließlich Jahr, Monat und Tag sowie der Uhrzeit 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;}

Das UI des Steuerelements variiert im Allgemeinen von Browser zu Browser. Das Steuerelement sollein lokales Datum und eine lokale Uhrzeit darstellen und nicht unbedingtdas lokale Datum und die 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 Sommerzeitsprung-Übergangslücke).

Wert

Ein String, der den Wert des im Eingabefeld eingegebenen Datums darstellt. Das Format des von diesem Eingabetyp verwendeten Datums- und Zeitwertes wird inLokale Datums- und Zeitstrings beschrieben.

Sie können einen Standardwert für die Eingabe festlegen, indem Sie ein Datum und eine Uhrzeit innerhalb desvalue-Attributs angeben, 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" />

Es ist zu beachten, dass die angezeigten Datums- und Zeitformate von dem tatsächlichenvalue abweichen; die angezeigten Daten und Zeiten sind gemäß der vom Betriebssystem des Benutzers gemeldeten Benutzerlokale formatiert, während der Datum/Uhrzeit-value immer im FormatYYYY-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 abrufen und setzen, indem Sie dievalue-Eigenschaft vonHTMLInputElement verwenden, zum Beispiel:

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

Zusätzliche Attribute

Zusätzlich zu den für alle<input>-Elemente gemeinsamen Attributen bietendatetime-local-Eingaben die folgenden Attribute.

max

Das späteste zu akzeptierende Datum und die späteste zu akzeptierende Uhrzeit. Wenn der in das Element eingegebenevalue nach diesem Zeitstempel liegt, schlägt dieEinschränkungsvalidierung des Elements 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 spezifizieren, der später oder gleich dem durch dasmin-Attribut angegebenen Wert ist.

min

Das früheste zu akzeptierende Datum und die früheste zu akzeptierende Uhrzeit; Zeitstempel, die früher sind, führen dazu, dass das Element dieEinschränkungsvalidierung nicht besteht. 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 spezifizieren, der früher oder gleich dem durch dasmax-Attribut angegebenen Wert ist.

step

Dasstep-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wertany, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Schrittgrund entfernt sind, sind gültig. Der Schrittgrund istmin, wenn angegeben; andernfallsvalue oder0 (die Unix-Zeit,1970-01-01T00:00), wenn keiner angegeben ist.

Fürdatetime-local-Eingabefelder wird der Wert vonstep in Sekunden angegeben und als Anzahl von Millisekunden behandelt, die dem 1000-fachen desstep-Wertes entsprechen (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 60, was 1 Minute anzeigt.

Ein String-Wert vonany bedeutet, dass keine Schrittweitenanforderung impliziert wird, und es wird jeder Wert zugelassen (vorbehaltlich anderer Beschränkungen, wiemin undmax). In Wirklichkeit hat es denselben Effekt wie60 fürdatetime-local-Eingaben, da die Auswahlanzeige in diesem Fall nur das Auswählen ganzer Minuten erlaubt.

Verwendung von datetime-local-Eingaben

Datum-/Uhrzeit-Eingaben sind für den 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 Lokale des Benutzers. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Verlangen Sie nicht von Ihren Benutzern, Daten einzugeben, die für die Funktionsweise Ihrer Anwendung nicht erforderlich sind.

Steuerung der Eingabegröße

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

Zeitzoneneinstellungen setzen

Eines, das der Eingabetypdatetime-local nicht bietet, ist die Möglichkeit, die Zeitzone und/oder Lokale des Datum-/Uhrzeit-Steuerelements festzulegen. Dies war im Eingabetypdatetime möglich, doch dieser Typ ist jetzt veraltet und wurde aus der Spezifikation entfernt. Die Hauptgründe für dessen Entfernung waren ein Mangel an Implementierung in Browsern und Bedenken hinsichtlich der Benutzeroberfläche/-erfahrung. Es ist einfacher, nur ein Steuerelement (oder Steuerelemente) zum Einstellen des Datums/Zeit anzubieten und sich dann mit der Lokale in einem separaten Steuerelement zu befassen.

Wenn Sie beispielsweise ein System erstellen, bei dem der Benutzer wahrscheinlich bereits angemeldet ist und seine Lokale bereits festgelegt ist, könnten Sie die Zeitzone in einemhidden-Eingabetyp bereitstellen. Zum Beispiel:

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

Wenn Sie andererseits dem Benutzer erlauben müssen, eine Zeitzone zusammen mit einer Datum/Zeit-Eingabe einzugeben, könnten Sie ein<select>-Element verwenden, um dem Benutzer das Einstellen der richtigen Zeitzone durch Auswahl eines bestimmten Ortes aus einer Reihe von Standorten zu ermöglichen:

<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 beiden Fällen würden die Datum/Zeit- und Zeitzonenwerte als separate Datenpunkte an den Server übermittelt und dann auf der Serverseite entsprechend in der Datenbank gespeichert werden müssen.

Validierung

Standardmäßig wendet<input type="datetime-local"> keine Validierung auf eingegebene Werte an. Die UI-Implementierungen lassen im Allgemeinen keine Eingaben zu, die nicht einem Datum/Zeit entsprechen — was hilfreich ist — aber ein Benutzer könnte dennoch keinen Wert eingeben und absenden oder ein ungültiges Datum und/oder eine ungültige Zeit (z.B. der 32. April) eintragen.

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/Zeit-Feldes obligatorisch zu machen. Infolgedessen zeigen Browser einen Fehler an, wenn Sie versuchen, ein Datum einzugeben, das außerhalb der festgelegten Grenzen liegt, oder ein leeres Datumsfeld einzugeben.

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

Hier ist das im obigen Beispiel verwendete CSS. Hier nutzen 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;}

Beispiele

Grundlegende Verwendungen von datetime-local

Die einfachste Verwendung von<input type="datetime-local"> umfasst eine grundlegende Kombination aus<input> und<label>-Element, wie im Folgenden gezeigt:

<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/Zeiten einzuschränken. Im folgenden Beispiel setzen wir ein Mindestdatum von2025-06-01T08:30 und ein Maximaldatum 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>

Nur Tage im Juni 2025 können 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 werden übereinstimmend mit:invalid und:out-of-range sein undValidierung fehlschlagen.

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

Der gültige Bereich umfasst alle Zeiten zwischen denmin- undmax-Werten; die Tageszeit ist nur an den ersten und letzten Daten im Bereich eingeschränkt.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das generische<input>-Element und die Schnittstelle zur Manipulation,HTMLInputElement
• <input type="date"> und<input type="time">
• Verwendete Datums- und Zeitformate in HTML
• Datum- und Zeitwähler-Tutorial