<input type="datetime-local"> HTML-Attributwert

Probieren Sie es aus

<label for="meeting-time">Choose a time for your appointment:</label>

<input
  type="datetime-local"
  id="meeting-time"
  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 ist dafür gedacht, ein lokales Datum und eine lokale Uhrzeit darzustellen und nicht unbedingt das lokale Datum und die lokale Uhrzeit des Benutzers. Das bedeutet, dass die Eingabe jede gültige Kombination aus Jahr, Monat, Tag, Stunde und Minute erlaubt, auch wenn eine solche Kombination in der lokalen Zeitzone des Benutzers ungültig ist (wie z. B. die eine Stunde innerhalb der Lücke bei der Umstellung auf Sommerzeit).

Wert

Ein String, der den Wert des in die Eingabe eingegebenen Datums darstellt. Das Format des von diesem Eingabetyp verwendeten Datums- und Zeitwerts 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 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" />

Zu beachten ist, dass die angezeigten Datums- und Zeitformate von dem tatsächlichen value abweichen; die angezeigten Datums- und Zeitangaben sind gemäß der vom Betriebssystem des Benutzers gemeldeten Benutzersprache formatiert, während der Datum-/Zeitwert immer im Format 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 von HTMLInputElement 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 allen <input>-Elementen gemeinsamen Attributen bieten datetime-local-Eingaben die folgenden Attribute.

max

Das späteste zu akzeptierende Datum und die späteste Uhrzeit. Wenn der in das Element eingegebene value später als dieser Zeitstempel ist, schlägt die Elementvalidierung Constraint Validation fehl. Wenn der Wert des max-Attributs kein gültiger String ist, der dem Format YYYY-MM-DDTHH:mm folgt, hat das Element keinen maximalen Wert.

Dieser Wert muss ein Datumsstring spezifizieren, das später oder gleich dem durch das min-Attribut spezifizierten ist.

min

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

Dieser Wert muss ein Datumsstring spezifizieren, das früher oder gleich dem durch das max-Attribut spezifizierten ist.

step

Das step-Attribut ist eine Zahl, die die Genauigkeit angibt, die der Wert einhalten muss, oder den speziellen Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Basiswert des Schritts entfernt sind, sind gültig. Der Basiswert des Schritts ist min, falls angegeben, value andernfalls, oder 0 (die Unix-Epoche, 1970-01-01T00:00), wenn keiner angegeben ist.

Für datetime-local-Eingaben wird der Wert von step in Sekunden angegeben und als eine Anzahl von Millisekunden behandelt, die 1000-mal dem step-Wert gleich ist (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 60, was 1 Minute anzeigt.

Ein Stringwert von any bedeutet, dass kein festgelegtes Intervall impliziert wird, und jeder Wert erlaubt ist (es sei denn, es gibt andere Beschränkungen, wie min und max). In Wirklichkeit hat es für datetime-local-Eingaben die gleiche Auswirkung wie 60, da die Auswahloberfläche in diesem Fall nur ganze Minuten zulässt.

Verwendung von datetime-local Eingaben

Datums-/Uhrzeit-Eingabesteuerelemente sind bequem für den Entwickler; sie bieten eine einfache Benutzeroberfläche zur Auswahl von Daten und Uhrzeiten und normalisieren das Datenformat, das unabhängig von der Sprache des Benutzers an den Server gesendet wird. Es ist jedoch wichtig, Ihre Benutzer zu berücksichtigen. Fordern Sie nicht von Ihren Benutzern, Daten einzugeben, die für das Funktionieren Ihrer Anwendung nicht erforderlich sind.

Steuerung der Eingabegröße

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

Festlegen von Zeitzonen

Etwas, das der datetime-local Eingabetyp nicht bereitstellt, ist eine Möglichkeit zur Einstellung der Zeitzone und/oder Lokalisierung des Datums-/Uhrzeit-Steuerelements. Dies war im datetime Eingabetyp verfügbar, aber dieser Typ ist jetzt veraltet, da er aus der Spezifikation entfernt wurde. Die Hauptgründe für die Entfernung sind ein Mangel an Implementierung in Browsern und Bedenken hinsichtlich der Benutzeroberfläche/-erfahrung. Es ist einfacher, eine Steuerung (oder Steuerungen) für die Festlegung des Datums/der Uhrzeit zu haben und dann die Lokalisierung in einer separaten Steuerung zu behandeln.

Zum Beispiel, wenn Sie ein System erstellen, bei dem der Benutzer wahrscheinlich bereits angemeldet ist und seine Lokalisierung bereits eingestellt 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 es erforderlich wäre, dass der Benutzer eine Zeitzone zusammen mit einer Datums-/Uhrzeiteingabe eingibt, könnten Sie ein <select>-Element verwenden, um dem Benutzer zu ermöglichen, die richtige Zeitzone durch Auswahl eines bestimmten Standorts aus einer Menge von Standorten festzulegen:

<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 Datums-/Uhrzeit- und Zeitzonenwerte als separate Datenpunkte an den Server übermittelt, und dann müssten Sie sie entsprechend in der Datenbank auf der Serverseite speichern.

Validierung

Standardmäßig wendet <input type="datetime-local"> keine Validierung auf eingegebene Werte an. Die Benutzeroberflächenimplementierungen lassen im Allgemeinen keine Eingaben zu, die kein Datum/Uhrzeit sind — was hilfreich ist —, aber ein Benutzer könnte dennoch keinen Wert ausfüllen und senden oder ein ungültiges Datum und/oder eine ungültige Uhrzeit eingeben (z. B. den 32. April).

Mit min und max können Sie die verfügbaren Daten einschränken (siehe Festlegen von maximalen und minimalen Daten), und mit dem required-Attribut können Sie die Eingabe des Datums/Uhrzeit-Felds erforderlich machen. Als Ergebnis zeigen Browser einen Fehler an, wenn Sie versuchen, ein Datum außerhalb der festgelegten Grenzen oder ein leeres Datumsfeld abzuschicken.

Schauen wir uns ein Beispiel an; hier haben wir minimale und maximale Werte für Datum/Zeit festgelegt und das Feld auch erforderlich 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 einem Datum außerhalb der festgelegten Grenzen) zu senden, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:

Hier ist das CSS, das im obigen Beispiel verwendet wurde. Hier nutzen wir die :valid und :invalid CSS-Eigenschaften, um die Eingabe basierend auf der Gültigkeit des aktuellen Werts zu gestalten. Wir platzieren die Icons 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 Verwendung von datetime-local

Die grundlegendste Verwendung von <input type="datetime-local"> umfasst eine einfache Kombination aus einem <input> und einem <label>, 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>

Festlegen von maximalen und minimalen Daten und Zeiten

Sie können die min und max-Attribute verwenden, um die Daten/Uhrzeiten einzuschränken, die vom Benutzer ausgewählt werden können. Im folgenden Beispiel legen wir ein Mindestdatum von 2025-06-01T08:30 und ein Höchstdatum von 2025-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="2025-06-01T08:30"
    max="2025-06-30T16:30" />
</form>

Nur Tage im Juni 2025 können ausgewählt werden. Je nachdem, 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, entsprechen aber :invalid und :out-of-range und fallen durch die Validierung.

In einigen Browsern (Safari) erscheint der Datumsauswahlbereich, um jedes Datum zuzulassen, aber der Wert wird bei der Auswahl eines Datums auf den gültigen Bereich beschränkt.

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.

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">
• In HTML verwendete Datums- und Zeitformate
• Tutorial zum Datum- und Zeitwähler