<input type="date">

Ein String, der das im Eingabefeld eingegebene Datum darstellt. Das Datum wird in Übereinstimmung mit Datumsstring-Formaten formatiert.

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

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

Sie können den Datumwert in JavaScript mit den Eigenschaften value und valueAsNumber des HTMLInputElement abrufen und setzen. 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 auf date gesetzt ist, und setzt dessen Wert auf 2017-06-01 (1. Juni 2017). Anschließend wird dieser Wert als String- und Zahlenformat ausgelesen.

Die allen <input>-Elementen gemeinsamen Attribute gelten auch für date-Eingaben, könnten jedoch deren Darstellung nicht beeinflussen. Zum Beispiel funktionieren size und placeholder möglicherweise nicht. date-Eingaben haben folgende zusätzliche Attribute.

Das späteste akzeptierte Datum. Wenn der in das Element eingegebene value danach liegt, scheitert das Element an der Einschränkungsvalidierung. Wenn der Wert des max-Attributs kein mögliches Datum im Format yyyy-mm-dd ist, hat das Element keinen maximalen Datumwert.

Wenn sowohl max als auch min gesetzt sind, muss dieser Wert ein Datumsstring sein, der später oder gleich dem im min-Attribut ist.

Das früheste akzeptierte Datum. Wenn der in das Element eingegebene value davor liegt, scheitert das Element an der Einschränkungsvalidierung. Wenn der Wert des min-Attributs kein mögliches Datum im Format yyyy-mm-dd ist, hat das Element keinen minimalen Datumwert.

Wenn sowohl max als auch min gesetzt sind, muss dieser Wert ein Datumsstring sein, der früher oder gleich dem im max-Attribut ist.

Das step-Attribut ist eine Zahl, die die Granularität spezifiziert, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Basiswert für das Schrittweiten (min falls angegeben, value andernfalls und ein angemessener Standardwert, wenn keiner der anderen vorhanden ist) entsprechen, sind gültig.

Ein Stringwert von any bedeutet, dass keine Schrittweite impliziert wird und jeder Wert erlaubt ist (vorbehaltlich anderer Einschränkungen wie min und max).

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

Datumseingaben bieten eine einfache Schnittstelle zum Auswählen von Daten und normalisieren das Datenformat, das an den Server gesendet wird, unabhängig vom Gebietsschema des Benutzers.

In diesem Abschnitt betrachten wir die grundlegende und dann komplexere Verwendung von <input type="date">.

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

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

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

Dieses HTML überträgt das eingegebene Datum unter dem Schlüssel bday an https://example.com — was zu einer URL wie https://example.com/?bday=1955-06-08 führt.

Sie können die Attribute min und max verwenden, um die Daten einzuschränken, die vom Benutzer ausgewählt werden können. Im folgenden Beispiel setzen wir ein Mindestdatum auf 2017-04-01 und ein Höchstdatum auf 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 Monats- und Jahresteile des Textfelds sind nicht editierbar, und Daten außerhalb des Aprils 2017 können im Auswahl-Widget nicht gewä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 (z. B. um nur Samstage auswählbar zu machen).

<input type="date"> unterstützt keine Formvergrößerungsattribute wie size. Verwenden Sie stattdessen CSS für die Größenanpassung.

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über dessen Format hinaus. Die Schnittstellen lassen es in der Regel nicht zu, etwas einzugeben, das kein Datum ist — was hilfreich ist.

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

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

Sehen wir uns ein Beispiel mit Mindest- und Höchstdaten an und machen auch ein Feld erforderlich:

<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) abzusenden, zeigt der Browser einen Fehler an. Probieren Sie jetzt das Beispiel aus:

Hier ist das CSS, das im obigen Beispiel verwendet wurde. Wir verwenden die :valid- und :invalid-Pseudoelemente, 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 von der Eingabe generierte Inhalt innerhalb der Formularelemente 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 eine Datumsauswahl mit dem nativen Picker <input type="date">.

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 die Schnittstelle zur Manipulation, HTMLInputElement
• Datum- und Zeit-Wähler-Anleitung
• In HTML verwendete Datums- und Zeitformate