<input type='date'>

Ein String, der das im Eingabefeld eingegebene Datum darstellt. Das Datum ist entsprechend dem Format von Datumsstrings formatiert.

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

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

Sie können den Datumswert in JavaScript mit den Eigenschaften HTMLInputElement value und valueAsNumber 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 in String- und Zahlenformaten zurück.

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

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

Wenn sowohl die Attribute max als auch min festgelegt sind, muss dieser Wert ein Datumsstring sein, der nach oder gleich dem im min-Attribut ist.

Das früheste akzeptierte Datum. Wenn das in das Element eingegebene value vorher liegt, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn der Wert des min-Attributs kein mögliches Datum im Format yyyy-mm-dd ist, hat das Element keinen minimalen Datumswert.

Wenn sowohl die Attribute max als auch min festgelegt sind, muss dieser Wert ein Datumsstring sein, der vor oder gleich dem im max-Attribut ist.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert gebunden sein muss, oder der besondere Wert any, der unten beschrieben wird. Nur Werte, die dem Basisschritt (min falls angegeben, value andernfalls und ein geeigneter Standardwert, wenn keiner dieser Werte angegeben ist) entsprechen, sind gültig.

Ein Stringwert von any bedeutet, dass kein Schritt impliziert wird und jeder Wert zulässig ist (abgesehen von anderen Einschränkungen wie min und max).

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

Datumseingaben bieten eine einfache Schnittstelle zur Auswahl von Daten und normalisieren das Datenformat, das an den Server gesendet wird, unabhängig von der Lokalisation des Benutzers.

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

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

<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 Attribute min und max verwenden, um die vom Benutzer wählbaren Daten einzuschränken. 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 — der Monats- und Jahresteil des Textfeldes wird nicht bearbeitbar sein, und Daten außerhalb von April 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 bei jeder Erhöhung des Datums übersprungen werden (z.B. um nur Samstage auswählbar zu machen).

<input type="date"> unterstützt keine Formgrößenattribute wie size. Bevorzugen Sie CSS, um die Größe zu steuern.

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über sein Format hinaus. Die Schnittstellen erlauben im Allgemeinen nicht, 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 außerhalb der Grenzen zu übermitteln.

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 zu übermitteln.

Lassen Sie uns ein Beispiel für minimale und maximale Daten betrachten und auch ein Feld erforderlich machen:

<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 einem Datum außerhalb der festgelegten Grenzen) abzusenden, zeigt der Browser einen Fehler an. Jetzt können Sie das Beispiel ausprobieren:

Hier ist das im obigen Beispiel verwendete CSS. Wir nutzen die :valid- und :invalid-Pseudoelemente, 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, nicht auf der Eingabe selbst, weil in Chrome zumindest der generierte Inhalt des Eingabefeldes innerhalb des Formularelements 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.

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-Auswahl-Leitfaden
• In HTML verwendete Datums- und Zeitformate
• Kompatibilität von CSS-Eigenschaften