<input type="date">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

<input>-Elemente mit dem Attribut type="date" erstellen Eingabefelder, die es dem Benutzer ermöglichen, ein Datum einzugeben. Die Darstellung der Datumsauswahl-Benutzeroberfläche variiert je nach Browser und Betriebssystem. Der Wert wird im Format yyyy-mm-dd normalisiert.

Der resultierende Wert beinhaltet das Jahr, den Monat und den Tag, aber nicht die Zeit. Die Eingabetypen time und datetime-local unterstützen Zeit- und Datum+Zeit-Eingaben.

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

Ein String, der das im Eingabefeld eingegebene Datum darstellt. Das Datum wird gemäß Datumsformatierungen formatiert.

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

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

Hinweis: Das angezeigte Datumsformat unterscheidet sich vom tatsächlichen value — das angezeigte Datum wird basierend auf der Spracheinstellung des Browsers des Benutzers formatiert, aber der geparste value ist immer im Format yyyy-mm-dd.

Sie können den Datumswert in JavaScript mit den Eigenschaften value und valueAsNumber des HTMLInputElement abrufen und festlegen. Zum Beispiel:

js
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 sowohl im String- als auch im Zahlenformat aus.

Zusätzliche Attribute

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

max

Das späteste akzeptierte Datum. Wenn der in das Element eingegebene value danach auftritt, schlägt das Element bei der Einschränkungsüberprüfung fehl. Wenn der Wert des max-Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, dann hat das Element keinen maximalen Datumswert.

Wenn sowohl die Attribute max als auch min gesetzt sind, muss dieser Wert ein Datums-String später oder gleich dem des min-Attributs sein.

min

Das früheste akzeptierte Datum. Wenn der in das Element eingegebene value vorher auftritt, schlägt das Element bei der Einschränkungsüberprüfung fehl. Wenn der Wert des min-Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, dann hat das Element keinen minimalen Datumswert.

Wenn sowohl die Attribute max als auch min gesetzt sind, muss dieser Wert ein Datums-String früher oder gleich dem des max-Attributs sein.

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder den speziellen Wert any, der unten beschrieben wird. Nur Werte, die dem Basiswert zum Inkrementieren (min, falls angegeben, value ansonsten und ein geeigneter Standardwert, wenn keiner dieser Werte bereitgestellt wird) entsprechen, sind gültig.

Ein String-Wert von any bedeutet, dass kein Inkrementieren impliziert ist und jeder Wert zulässig ist (unter Ausschluss anderer Einschränkungen wie min und max).

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht mit der Inkrementier-Konfiguration übereinstimmen, kann der Benutzeragent auf den nächsten gültigen Wert runden, wobei bei zwei gleich nahen Optionen Zahlen in positiver Richtung bevorzugt werden.

Für date-Eingaben wird der Wert von step in Tagen angegeben und als eine Anzahl von Millisekunden betrachtet, 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.

Hinweis: Die Angabe von any als Wert für step hat den gleichen Effekt wie 1 für date-Eingaben.

Verwendung von Date-Eingaben

Date-Eingabefelder bieten eine einfache Oberfläche zur Auswahl von Daten und normalisieren das Datenformat, das an den Server gesendet wird, unabhängig von der Spracheinstellung des Benutzers.

In diesem Abschnitt betrachten wir grundlegende und dann komplexere Anwendungsbeispiele für <input type="date">.

Grundlegende Verwendung von Date

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

html
<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 — dies resultiert in einer URL wie https://example.com/?bday=1955-06-08.

Festlegung von maximalen und minimalen Daten

Sie können die Attribute min und max verwenden, um die Daten einzuschränken, die der Benutzer wählen kann. Im folgenden Beispiel setzen wir ein Mindestdatum von 2017-04-01 und ein Höchstdatum von 2017-04-30:

html
<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 Monat- und Jahrteile des Textfeldes werden nicht bearbeitbar sein, und Daten außerhalb des Aprils 2017 können im Auswahl-Widget nicht ausgewählt werden.

Sie können das Attribut step verwenden, um die Anzahl der Tage zu variieren, die bei jeder Erhöhung des Datums übersprungen werden sollen (z.B. nur Samstage auswählbar zu machen).

Kontrolle der Eingabegröße

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

Validierung

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über dessen Format hinaus. Die Schnittstellen erlauben in der Regel nicht, dass etwas anderes als ein Datum eingegeben wird — was hilfreich ist.

Wenn Sie min und max verwenden, um die verfügbaren Daten einzuschränken (siehe Festlegung von maximalen und minimalen Daten), deaktiviert das Formularelement ungültige Daten und zeigt einen Fehler an, wenn Sie versuchen, ein Datum einzureichen, das außerhalb der Grenzen liegt.

Sie können auch das Attribut required verwenden, um die Eingabe des Datums obligatorisch zu machen — ein Fehler wird angezeigt, wenn Sie versuchen, ein leeres Datumsfeld einzureichen.

Werfen wir einen Blick auf ein Beispiel mit minimalem und maximalem Datum, bei dem auch ein Feld erforderlich gemacht wurde:

html
<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 mit einem Datum außerhalb der festgelegten Grenzen) einzureichen, 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 ein <span> neben der Eingabe setzen, nicht auf die Eingabe selbst, da zumindest in Chrome der generierte Inhalt der Eingabe innerhalb des Formularsteuerelements platziert wird und nicht effektiv gestylt oder angezeigt werden kann.

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

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

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

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

Warnung: Die clientseitige Formularvalidierung ersetzt nicht die Validierung auf dem Server. Es ist einfach für jemanden, das HTML zu ändern oder Ihr HTML komplett zu umgehen und die Daten direkt an Ihren Server zu senden. Wenn Ihr Server die empfangenen Daten nicht validiert, könnten mit falsch formatierten, zu großen, vom falschen Typ etc. Daten Katastrophen auftreten.

Beispiele

In diesem Beispiel erstellen wir einen Datumsauswähler mithilfe des nativen <input type="date">-Pickers.

HTML

Das HTML sieht folgendermaßen aus:

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

CSS

Das CSS sieht folgendermaßen aus:

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

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

Ergebnisse

Technische Zusammenfassung

Wert Ein String, der ein Datum im Format YYYY-MM-DD darstellt, oder leer
Ereignisse [`change`](/de/docs/Web/API/HTMLElement/change_event) und [`input`](/de/docs/Web/API/Element/input_event)
Unterstützte allgemeine Attribute autocomplete, list, readonly, step
IDL-Attribute value, valueAsDate, valueAsNumber
DOM-Interface

[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)

Methoden [`select()`](/de/docs/Web/API/HTMLInputElement/select), [`stepDown()`](/de/docs/Web/API/HTMLInputElement/stepDown), [`stepUp()`](/de/docs/Web/API/HTMLInputElement/stepUp)
Implizierte ARIA-Rolle keine entsprechende Rolle

Spezifikationen

Specification
HTML
# date-state-(type=date)

Browser-Kompatibilität

Siehe auch