<input type="date">

Ein String, der das im Eingabefeld eingegebene Datum darstellt. Das Datum wird gemäß Datumsformatierungen formatiert.

Sie können einen Standardwert für die Eingabe mit einem Datum innerhalb des value-Attributs festlegen, wie folgt:

<input type="date" value="2017-06-01" />

Sie können den Datumswert in JavaScript mit den Eigenschaften value und valueAsNumber des HTMLInputElement abrufen und festlegen. Zum Beispiel:

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

Dieser Code findet das erste <input>-Element, dessen type date ist, und setzt seinen Wert auf 2017-06-01 (1. Juni 2017). Anschließend liest er diesen Wert sowohl im String- als auch im Zahlenformat aus.

Die Attribute, die für alle <input>-Elemente üblich sind, gelten auch für date-Eingaben, können jedoch deren Darstellung möglicherweise nicht beeinflussen. Beispielsweise könnten size und placeholder nicht funktionieren. date-Eingaben haben die folgenden zusätzlichen Attribute.

Das späteste akzeptierte Datum. Wenn der in das Element eingegebene value danach auftritt, schlägt das Element bei der Einschränkungsüberprüfung fehl. Wenn der Wert des max-Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, dann hat das Element keinen maximalen Datumswert.

Wenn sowohl die Attribute max als auch min gesetzt sind, muss dieser Wert ein Datums-String später oder gleich dem des min-Attributs sein.

Das früheste akzeptierte Datum. Wenn der in das Element eingegebene value vorher auftritt, schlägt das Element bei der Einschränkungsüberprüfung fehl. Wenn der Wert des min-Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, dann hat das Element keinen minimalen Datumswert.

Wenn sowohl die Attribute max als auch min gesetzt sind, muss dieser Wert ein Datums-String früher oder gleich dem des max-Attributs sein.

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 Basiswert zum Inkrementieren (min, falls angegeben, value ansonsten und ein geeigneter Standardwert, wenn keiner dieser Werte bereitgestellt wird) entsprechen, sind gültig.

Ein String-Wert von any bedeutet, dass kein Inkrementieren impliziert ist und jeder Wert zulässig ist (unter Ausschluss anderer Einschränkungen wie min und max).

Für date-Eingaben wird der Wert von step in Tagen angegeben und als eine Anzahl von Millisekunden betrachtet, die 86.400.000 mal dem step-Wert entspricht (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert von step ist 1, was 1 Tag angibt.

Date-Eingabefelder bieten eine einfache Oberfläche zur Auswahl von Daten und normalisieren das Datenformat, das an den Server gesendet wird, unabhängig von der Spracheinstellung des Benutzers.

In diesem Abschnitt betrachten wir grundlegende und dann komplexere Anwendungsbeispiele für <input type="date">.

Die grundlegendste Verwendung von <input type="date"> beinhaltet ein <input> kombiniert mit seinem <label>, wie unten dargestellt:

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>

Dieses HTML sendet das eingegebene Datum unter dem Schlüssel bday an https://example.com — dies resultiert in einer URL wie https://example.com/?bday=1955-06-08.

Sie können die Attribute min und max verwenden, um die Daten einzuschränken, die der Benutzer wählen kann. Im folgenden Beispiel setzen wir ein Mindestdatum von 2017-04-01 und ein Höchstdatum von 2017-04-30:

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

Das Ergebnis ist, dass nur Tage im April 2017 ausgewählt werden können — die Monat- und Jahrteile des Textfeldes werden nicht bearbeitbar sein, und Daten außerhalb des Aprils 2017 können im Auswahl-Widget nicht ausgewählt werden.

Sie können das Attribut step verwenden, um die Anzahl der Tage zu variieren, die bei jeder Erhöhung des Datums übersprungen werden sollen (z.B. nur Samstage auswählbar zu machen).

<input type="date"> unterstützt keine Formulargrößenattribute wie size. Verwenden Sie stattdessen CSS, um es zu dimensionieren.

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über dessen Format hinaus. Die Schnittstellen erlauben in der Regel nicht, dass etwas anderes als ein Datum eingegeben wird — was hilfreich ist.

Wenn Sie min und max verwenden, um die verfügbaren Daten einzuschränken (siehe Festlegung von maximalen und minimalen Daten), deaktiviert das Formularelement ungültige Daten und zeigt einen Fehler an, wenn Sie versuchen, ein Datum einzureichen, das außerhalb der Grenzen liegt.

Sie können auch das Attribut required verwenden, um die Eingabe des Datums obligatorisch zu machen — ein Fehler wird angezeigt, wenn Sie versuchen, ein leeres Datumsfeld einzureichen.

Werfen wir einen Blick auf ein Beispiel mit minimalem und maximalem Datum, bei dem auch ein Feld erforderlich gemacht wurde:

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Submit</button>
  </p>
</form>

Wenn Sie versuchen, das Formular mit einem unvollständigen Datum (oder mit einem Datum außerhalb der festgelegten Grenzen) einzureichen, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:

Hier ist das CSS, das im obigen Beispiel verwendet wurde. Wir verwenden die :valid und :invalid Pseudo-Elemente, um ein Symbol neben dem Eingabefeld hinzuzufügen, basierend darauf, ob der aktuelle Wert gültig ist. Wir mussten das Symbol auf ein <span> neben der Eingabe setzen, nicht auf die Eingabe selbst, da zumindest in Chrome der generierte Inhalt der Eingabe innerhalb des Formularsteuerelements platziert wird und nicht effektiv gestylt oder angezeigt werden kann.

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

In diesem Beispiel erstellen wir einen Datumsauswähler mithilfe des nativen <input type="date">-Pickers.

Das HTML sieht folgendermaßen aus:

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

Das CSS sieht folgendermaßen aus:

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

• Das generische <input>-Element und das Interface zur Manipulation, HTMLInputElement
• Anleitung für Datumsauswahl- und Zeiteingabetypen
• In HTML verwendete Datums- und Zeitformate