<input type="date">

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

Sie können einen Standardwert für das Eingabefeld 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 dessen Wert auf 2017-06-01 (1. Juni 2017). Anschließend liest er diesen Wert sowohl in String- als auch in Zahlenformaten zurück.

Die allgemeinen Attribute, die für alle <input>-Elemente gelten, finden auch bei date-Eingaben Anwendung, können jedoch dessen Darstellung nicht beeinflussen. Zum Beispiel 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 später liegt, schlägt die Einschränkung der Validierung fehl. Wenn der Wert des max-Attributs kein mögliches Datums-String im Format jjjj-mm-tt ist, hat das Element keinen maximalen Datumswert.

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

Das früheste akzeptierte Datum. Wenn der in das Element eingegebene value früher liegt, schlägt die Einschränkung der Validierung fehl. Wenn der Wert des min-Attributs kein mögliches Datums-String im Format jjjj-mm-tt ist, hat das Element keinen minimalen Datumswert.

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

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert gebunden werden muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Ausgangspunkt für die Schrittgröße entsprechen (min, falls angegeben, andernfalls value und ein geeigneter Standardwert, falls keiner von beiden bereitgestellt wird), sind gültig.

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

Bei date-Eingaben wird der Wert von step in Tagen angegeben; und wird als Anzahl von Millisekunden behandelt, die 86.400.000-mal dem step-Wert entsprechen (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert von step ist 1, was 1 Tag anzeigt.

Datumseingaben bieten eine einfache Oberfläche zur Auswahl von Daten und normalisieren das gesendete Datenformat an den Server, unabhängig von der Spracheinstellung des Benutzers.

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

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

<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 — was zu einer URL wie https://example.com/?bday=1955-06-08 führt.

Sie können die min- und max-Attribute verwenden, um die vom Benutzer auswählbaren Daten einzuschränken. Im folgenden Beispiel legen wir ein Mindestdatum von 2017-04-01 und ein Höchstdatum von 2017-04-30 fest:

<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 Textfelds sind nicht bearbeitbar, und Daten außerhalb des Aprils 2017 können im Auswahl-Widget nicht ausgewählt werden.

Sie können das step-Attribut verwenden, um die Anzahl der Tage zu variieren, die jedes Mal gesprungen werden, wenn das Datum erhöht wird (z.B., um nur Samstage auswählbar zu machen).

<input type="date"> unterstützt keine Formulargrößenattribute wie size. Bevorzugen Sie CSS für die Größe.

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über sein Format hinaus. Die Schnittstellen lassen im Allgemeinen nicht zu, dass Sie etwas eingeben, 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 einzureichen, das außerhalb des zulässigen Bereichs liegt.

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

Schauen wir uns ein Beispiel an, wie Mindest- und Höchstdaten festgelegt werden und auch ein Feld erforderlich gemacht wird:

<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 im obigen Beispiel verwendete CSS. Wir machen Gebrauch von den :valid und :invalid Pseudoelementen, um ein Symbol neben der Eingabe hinzuzufügen, basierend darauf, ob der aktuelle Wert gültig ist. Wir mussten das Symbol auf einem <span> neben der Eingabe platzieren und nicht auf der 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 eine Datumsauswahl mit dem nativen <input type="date">-Picker.

Der HTML-Code sieht so 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>

Der CSS-Code sieht so aus:

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

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

• Das generische <input>-Element und die Schnittstelle zur Manipulation, HTMLInputElement
• Datum- und Uhrzeit-Picker-Tutorial
• Datum- und Uhrzeitformate in HTML