HTML-Attributwert von <input type="date">

Probieren Sie es aus

<label for="start">Start date:</label>

<input
  type="date"
  id="start"
  name="trip-start"
  value="2018-07-22"
  min="2018-01-01"
  max="2018-12-31" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Eine Zeichenfolge, die das im Eingabefeld eingegebene Datum darstellt. Das Datum ist gemäß dem Format für Datumszeichenfolgen formatiert.

Sie können einen Standardwert für das Eingabefeld festlegen, indem Sie im Attribut value ein Datum angeben:

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

Sie können den Datumswert in JavaScript über die Eigenschaften value und valueAsNumber von HTMLInputElement auslesen 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 sucht das erste <input>-Element, dessen type den Wert date hat, und setzt dessen Wert auf 2017-06-01 (1. Juni 2017). Anschließend liest er diesen Wert als Zeichenfolge und als Zahl aus.

Zusätzliche Attribute

Neben den globalen Attributen und den Eingabeattributen, die allen <input>-Elementen gemeinsam sind, unterstützt der Eingabetyp date die folgenden Attribute:

max

Das späteste zulässige Datum. Liegt der im Element eingegebene value danach, besteht das Element die Constraint-Validierung nicht. Wenn der Wert des Attributs max keine gültige Datumszeichenfolge im Format yyyy-mm-dd ist, hat das Element kein maximales Datum.

Wenn sowohl max als auch min gesetzt sind, muss dieser Wert eine Datumszeichenfolge sein, die später als oder gleich dem Wert des Attributs min ist.

min

Das früheste zulässige Datum. Liegt der im Element eingegebene value davor, besteht das Element die Constraint-Validierung nicht. Wenn der Wert des Attributs min keine gültige Datumszeichenfolge im Format yyyy-mm-dd ist, hat das Element kein minimales Datum.

Wenn sowohl max als auch min gesetzt sind, muss dieser Wert eine Datumszeichenfolge sein, die früher als oder gleich dem Wert des Attributs max ist.

step

Das Attribut step ist eine Zahl, die die Schrittweite angibt, an die sich der Wert halten muss, oder der unten beschriebene Sonderwert any. Gültig sind nur Werte, die vom Ausgangswert aus eine ganzzahlige Anzahl von Schritten entfernt sind. Als Ausgangswert dient min, falls angegeben, andernfalls value oder 0 (die Unix-Epoche, 1970-01-01), wenn keiner der beiden Werte angegeben ist.

Bei Eingabefeldern vom Typ date wird step in Tagen angegeben und als Anzahl von Millisekunden behandelt, die dem step-Wert multipliziert mit 86.400.000 entspricht (der zugrunde liegende numerische Wert wird in Millisekunden angegeben). Der Standardwert ist 1, was einem Tag entspricht.

Der Zeichenfolgenwert any bedeutet, dass keine Schrittweite vorgegeben ist und jeder Wert zulässig ist (sofern keine anderen Einschränkungen wie min und max gelten). Bei Eingabefeldern vom Typ date hat dies praktisch dieselbe Wirkung wie 1, da die Datumsauswahl nur ganze Tage zur Auswahl anbietet.

Datumseingabefelder verwenden

Datumseingabefelder bieten eine einfache Möglichkeit, ein Datum auszuwählen. Außerdem vereinheitlichen sie das Format der an den Server gesendeten Daten unabhängig von den Spracheinstellungen der Benutzer.

In diesem Abschnitt betrachten wir zunächst einfache und dann komplexere Einsatzmöglichkeiten von <input type="date">.

Einfache Verwendung von date

Die einfachste Verwendung von <input type="date"> besteht aus einem <input> und dem zugehörigen <label>, wie unten gezeigt:

<label>
  Enter your birthday:
  <input type="date" name="bday" />
</label>

Wenn dieses Eingabefeld Teil eines Formulars ist, das mit der Methode GET an https://example.com gesendet wird, wird das eingegebene Datum unter dem Schlüssel bday übertragen. Daraus ergibt sich beispielsweise eine URL wie https://example.com/?bday=1955-06-08.

Maximales und minimales Datum festlegen

Mit den Attributen min und max können Sie die auswählbaren Daten einschränken. Im folgenden Beispiel legen wir 2017-04-01 als frühestes und 2017-04-30 als spätestes Datum fest:

<label>
  Choose your preferred party date:
  <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
</label>

Dadurch können nur Tage im April 2017 ausgewählt werden. Der Monat und das Jahr lassen sich im Eingabefeld nicht bearbeiten, und Daten außerhalb des April 2017 können in der Datumsauswahl nicht ausgewählt werden.

Mit dem Attribut step können Sie die Anzahl der Tage festlegen, um die das Datum bei jedem Schritt erhöht wird, beispielsweise damit nur Samstage auswählbar sind.

Größe des Eingabefelds festlegen

<input type="date"> unterstützt keine Attribute zur Größenfestlegung von Formularelementen wie size. Verwenden Sie dafür vorzugsweise CSS.

Validierung

Standardmäßig überprüft <input type="date"> einen eingegebenen Wert nur hinsichtlich seines Formats. Die Benutzeroberflächen lassen in der Regel keine Eingabe zu, die kein Datum ist.

Wenn Sie die verfügbaren Daten mit min und max einschränken (siehe Maximales und minimales Datum festlegen), deaktiviert das Formularsteuerelement ungültige Daten. Wenn Sie versuchen, ein Datum außerhalb des zulässigen Bereichs zu übermitteln, wird ein Fehler angezeigt.

Mit dem Attribut required können Sie die Eingabe eines Datums verpflichtend machen. Wenn Sie versuchen, ein leeres Datumsfeld zu übermitteln, wird ein Fehler angezeigt.

Betrachten wir ein Beispiel mit einem minimalen und einem maximalen Datum, in dem das Feld außerdem ein Pflichtfeld ist:

<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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Wenn Sie versuchen, das Formular mit einem unvollständigen Datum oder einem Datum außerhalb des festgelegten Bereichs zu übermitteln, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel aus:

Hier ist das CSS aus dem obigen Beispiel. Wir verwenden die :valid- und :invalid-Pseudoelemente, um neben dem Eingabefeld ein Symbol anzuzeigen, je nachdem, ob der aktuelle Wert gültig ist. Das Symbol musste auf einem <span> neben dem Eingabefeld platziert werden und nicht auf dem Eingabefeld selbst: Zumindest in Chrome wird der generierte Inhalt des Eingabefelds innerhalb des Formularsteuerelements platziert und kann daher nicht wirkungsvoll gestaltet oder angezeigt werden.

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

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

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

Beispiele

In diesem Beispiel erstellen wir eine Datumsauswahl mit der nativen Datumsauswahl von <input type="date">.

HTML

Das HTML sieht so aus:

<div class="nativeDatePicker">
  <label for="bday">Enter your birthday:</label>
  <input type="date" id="bday" name="bday" />
  <span class="validity"></span>
</div>

CSS

Das CSS sieht so aus:

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

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

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das allgemeine <input>-Element und die Schnittstelle zu seiner Bearbeitung, HTMLInputElement
• Tutorial zur Datums- und Uhrzeitauswahl
• In HTML verwendete Datums- und Uhrzeitformate