<input type="date">

Ein String, der das in die Eingabe eingegebene Datum repräsentiert. Das Datum wird gemäß Datums-String-Format 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 HTMLInputElement value und valueAsNumber Eigenschaften 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). Es liest dann diesen Wert in String- und Zahlenformaten zurück.

Zusätzlich zu den globalen Attributen und den Input-Attributen, die allen <input>-Elementen gemeinsam sind, unterstützt das date-Eingabefeld folgende Attribute:

Das spätestmögliche Datum, das akzeptiert wird. Wenn der in das Element eingegebene value danach liegt, schlägt die Constraint-Validierung des Elements 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 max als auch min festgelegt sind, muss dieser Wert ein Datums-String sein, der später oder gleich dem Wert im min-Attribut ist.

Das frühestmögliche Datum, das akzeptiert wird. Wenn der in das Element eingegebene value vorher liegt, schlägt die Constraint-Validierung des Elements 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 max als auch min festgelegt sind, muss dieser Wert ein Datums-String sein, der früher oder gleich dem Wert im max-Attribut ist.

Das step-Attribut ist eine Zahl, die die Granularität angibt, nach der sich der Wert richten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Basiswert für das Stepping (min falls angegeben, andernfalls value und ein geeigneter Standardwert, wenn keiner dieser Werte bereitgestellt wird) entsprechen, sind gültig.

Ein String-Wert von any bedeutet, dass kein Stepping impliziert wird und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen, wie etwa min und max).

Bei date-Eingaben wird der Wert des step in Tagen angegeben; und wird als eine Anzahl von Millisekunden behandelt, 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.

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

In diesem Abschnitt betrachten wir grundlegende und dann komplexere Verwendungen 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 vom Benutzer wä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 Monats- und Jahresteile der Textbox sind nicht bearbeitbar, und Daten außerhalb des 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 jedes Mal gesprungen werden, wenn das Datum erhöht wird (z. B. nur Samstage auswählbar machen).

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

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über sein Format hinaus. Die Schnittstellen lassen in der Regel 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 Formularsteuerungselement ungültige Daten und zeigt einen Fehler an, wenn Sie versuchen, ein Datum außerhalb der Grenzen einzureichen.

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

Lassen Sie uns ein Beispiel für Mindest- und Höchstdaten 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) einzureichen, zeigt der Browser einen Fehler an. Versuchen Sie jetzt, mit dem Beispiel zu spielen:

Hier ist das CSS, das im obigen Beispiel verwendet wurde. Wir nutzen die :valid und :invalid Pseudo-Elemente, um ein Symbol neben dem Eingabefeld hinzuzufügen, je nachdem, ob der aktuelle Wert gültig ist. Wir mussten das Symbol auf einem <span> neben dem Eingabefeld platzieren, nicht auf dem Eingabefeld selbst, da in Chrome zumindest der generierte Inhalt des Eingabefelds in die Formularsteuerung eingefügt 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 Datumsauswahlmechanismus 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
• Leitfaden zur Datum- und Uhrzeitauswahl
• Datum- und Zeitformate, die in HTML verwendet werden