<input type="date">

Ein String, der das in die Eingabe eingegebene Datum repräsentiert. Das Datum wird gemäß dem Datumszeichenkettenformat formatiert.

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

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

Sie können den Datumswert 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 seinen Wert auf 2017-06-01 (1. Juni 2017). Er liest diesen Wert dann im String- und Zahlenformat zurück.

Zusätzlich zu den globalen Attributen und den Eingabeattributen, die allen <input>-Elementen gemein sind, unterstützt die date-Eingabe die folgenden Attribute:

Das späteste akzeptierte Datum. Wenn der in das Element eingegebene value danach 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 Datumswert.

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

Das früheste akzeptierte Datum. Wenn der in das Element eingegebene value vorher 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 Datumswert.

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

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert angepasst werden muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die ein Vielfaches der Schritte vom Schrittbasiswert entfernt sind, sind gültig. Die Schrittbasis ist min, falls angegeben, ansonsten value, oder 0 (die Unix-Epoche, 1970-01-01), wenn keines von beiden angegeben ist.

Für date-Eingaben wird der Wert von step in Tagen angegeben und als Anzahl von Millisekunden betrachtet, die 86.400.000-mal so groß ist wie der step-Wert (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 1, was 1 Tag bedeutet.

Ein Stringwert von any bedeutet, dass kein Schritt impliziert ist und jeder Wert zulässig ist (abgesehen von anderen Einschränkungen wie min und max). Tatsächlich hat es den gleichen Effekt wie 1 für date-Eingaben, da die Auswahl-Benutzeroberfläche nur die Auswahl ganzer Tage zulässt.

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

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

Der grundlegendste Gebrauch von <input type="date"> beinhaltet eine <input>-Eingabe kombiniert mit ihrem <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 reicht das eingegebene Datum unter dem Schlüssel bday an https://example.com ein — 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 auswählbaren Daten durch den Benutzer 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 Monate und Jahre im Textfeld sind nicht bearbeitbar, 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 jedes Mal gesprungen werden, wenn das Datum erhöht wird (z.B. nur Samstage auswählbar zu machen).

<input type="date"> unterstützt keine Formulargrößenattribute wie size. Verwenden Sie dafür CSS.

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

Wenn Sie die Attribute 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, sobald Sie versuchen, ein außergrenzwertiges Datum abzusenden.

Sie können auch das required-Attribut verwenden, um die Datumseingabe obligatorisch zu machen — ein Fehler wird angezeigt, wenn Sie versuchen, ein leeres Datumsfeld abzusenden.

Schauen wir uns ein Beispiel für minimale und maximale Daten an und machen außerdem das 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>

Falls Sie versuchen, das Formular mit einem unvollständigen Datum (oder einem Datum außerhalb der festgelegten Grenzen) abzusenden, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:

Hier ist das CSS, das im obigen Beispiel verwendet wurde. Wir verwenden die :valid und :invalid Pseudo-Elemente, um ein Symbol neben dem Eingabefeld hinzuzufügen, basierend darauf, ob der aktuelle Wert gültig ist. Wir mussten das Symbol auf einen <span> neben der Eingabe setzen, nicht auf die Eingabe selbst, da zumindest in Chrome der generierte Inhalt der Eingabe 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 einen Date Picker 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: " ✓";
}

• Den generischen <input>-Element und die Schnittstelle zu ihrer Manipulation, HTMLInputElement
• Datum- und Uhrzeitauswahl-Anleitung
• In HTML verwendete Datums- und Zeitformate