<input type="date">

Ein String, der das im Eingabefeld eingegebene Datum repräsentiert. Das Datum wird gemäß dem Datumsformat für Zeichenketten formatiert.

Sie können einen Standardwert für die Eingabe mit einem Datum in dem value-Attribut festlegen, so:

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

Sie können den Datumwert in JavaScript mit den value- und valueAsNumber-Eigenschaften von 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). Dann wird dieser Wert sowohl in Zeichenketten- als auch in Zahlenformaten zurückgelesen.

Die Attribute, die für alle <input> Elemente gemeinsam sind, gelten auch für date-Eingaben, beeinflussen möglicherweise jedoch deren Darstellung nicht. Zum Beispiel funktionieren size und placeholder möglicherweise nicht. 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änkungsvalidierung des Elements fehl. Wenn der Wert des max-Attributs keine mögliche Datumszeichenkette im Format yyyy-mm-dd ist, hat das Element keinen maximalen Datumwert.

Wenn sowohl die Attribute max als auch min festgelegt sind, muss dieser Wert eine Datumszeichenkette sein, die später oder gleich derjenigen im min-Attribut ist.

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

Wenn sowohl die Attribute max als auch min festgelegt sind, muss dieser Wert eine Datumszeichenkette sein, die früher oder gleich derjenigen im max-Attribut ist.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert gebunden sein muss, oder der spezielle Wert any, welcher unten beschrieben wird. Nur Werte, die dem Standwert (min falls angegeben, ansonsten value und ein entsprechender Standardwert, falls keines von beiden angegeben ist) entsprechen, sind gültig.

Ein Zeichenkettenwert von any bedeutet, dass keine Einhaltung eines festgelegten Schritts impliziert wird und jeder Wert erlaubt ist (unter Ausschluss 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 dem step-Wert multipliziert mit 86.400.000 (die zugrunde liegende numerische Wert ist in Millisekunden) entspricht. Der Standardwert von step beträgt 1 und zeigt einen Tag an.

Datumseingaben bieten eine einfache Oberfläche zum Auswählen von Daten und normalisieren das an den Server gesendete Datenformat unabhängig von der Locale des Benutzers.

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

Die grundlegendste Verwendung von <input type="date"> umfasst eine <input>, die mit ihrem <label> kombiniert ist, 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 übermittelt 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 Jahresfelder des Textfeldes sind nicht bearbeitbar, und Daten außerhalb April 2017 können im Auswahl-Widget nicht ausgewählt werden.

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

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

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über sein Format hinaus. Die Schnittstellen lassen Sie im Allgemeinen nichts eingeben, was 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 Form-Steuerelement 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 Datumsfelds obligatorisch zu machen — ein Fehler wird angezeigt, wenn Sie versuchen, ein leeres Datumsfeld abzusenden.

Betrachten wir ein Beispiel für Mindest- und Höchstdaten und ein verpflichtendes Feld:

<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) abzuschicken, zeigt der Browser einen Fehler an. Versuchen Sie nun, mit dem Beispiel zu spielen:

Hier ist das CSS, das im obigen Beispiel verwendet wird. Wir verwenden die :valid und :invalid Pseudo-Elemente, um ein Symbol neben dem Eingabefeld hinzuzufügen, je nachdem, ob der aktuelle Wert gültig ist oder nicht. 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 Form-Steuerelements 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 Datumsauswahlmechanismus mit dem nativen <input type="date"> Auswahlfeld.

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
• Anleitung für Datums- und Zeitwahlfelder
• Datum- und Zeitformate, die in HTML verwendet werden