<input>-Elemente vomtype="date" erstellen Eingabefelder, die es dem Benutzer ermöglichen, ein Datum einzugeben. Das Erscheinungsbild des Datumsauswahl-Bedienelements variiert je nach Browser und Betriebssystem. Der Wert wird auf das Formatyyyy-mm-dd normalisiert.

Der resultierende Wert enthält das Jahr, den Monat und den Tag, jedochnicht die Zeit. Die Eingabetypentime unddatetime-local unterstützen Zeit- und Datums+Zeit-Eingaben.

Probieren Sie es aus

<label for="start">Start date:</label><input  type="date"   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äß demDatumsformat formatiert.

Sie können einen Standardwert für die Eingabe mit einem Datum imvalue-Attribut festlegen, wie hier gezeigt:

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

Sie können den Datumswert in JavaScript mit den Eigenschaftenvalue undvalueAsNumber desHTMLInputElement 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, dessentypedate ist, und setzt dessen Wert auf2017-06-01 (1. Juni 2017). Dann liest er diesen Wert in String- und Zahlformaten zurück.

Zusätzliche Attribute

Zusätzlich zu denglobalen Attributen und denEingabe-Attributen, die allen<input>-Elementen gemein sind, unterstützt dasdate-Eingabefeld folgende Attribute:

max

Das späteste zu akzeptierende Datum. Wenn der im Element eingegebenevalue danach liegt, schlägt dieEinschränkungsvalidierung des Elements fehl. Wenn der Wert desmax-Attributs kein mögliches Datums-String im Formatyyyy-mm-dd ist, hat das Element keinen maximalen Datumswert.

Falls sowohl die Attributemax als auchmin festgelegt sind, muss dieser Wert ein Datums-Stringspäter oder gleich dem immin-Attribut sein.

min

Das früheste zu akzeptierende Datum. Wenn der im Element eingegebenevalue vorher liegt, schlägt dieEinschränkungsvalidierung des Elements fehl. Wenn der Wert desmin-Attributs kein mögliches Datums-String im Formatyyyy-mm-dd ist, hat das Element keinen minimalen Datumswert.

Falls sowohlmax als auchmin festgelegt sind, muss dieser Wert ein Datums-Stringfrüher oder gleich dem immax-Attribut sein.

step

Dasstep-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert gebunden sein muss, oder der spezielle Wertany, der unten beschrieben wird. Nur Werte, die eine ganze Zahl von Schritten vom Schrittgrund entfernt sind, sind gültig. Der Schrittgrund istmin, falls angegeben, ansonstenvalue, oder0 (die Unix-Epoche,1970-01-01), falls keiner vorhanden ist.

Fürdate-Eingaben wird der Wert desstep-Attributs in Tagen angegeben und als eine Anzahl von Millisekunden behandelt, die 86.400.000-mal demstep-Wert entspricht (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert ist 1, was 1 Tag anzeigt.

Ein String-Wert vonany bedeutet, dass kein Schrittzwang impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wiemin undmax). Tatsächlich hat es die gleiche Wirkung wie1 fürdate-Eingaben, da die Auswahlanzeige nur die Auswahl ganzer Tage erlaubt.

Verwendung von Datumseingaben

Datumseingaben bieten eine einfache Möglichkeit zur Auswahl von Daten und normieren das Format der an den Server gesendeten Daten unabhängig vom Standort des Benutzers.

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

Einfache Verwendung von Datum

Die einfachste Verwendung von<input type="date"> beinhaltet 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 übermittelt das eingegebene Datum unter dem Schlüsselbday anhttps://example.com — was zu einer URL wiehttps://example.com/?bday=1955-06-08 führt.

Festlegung von maximalen und minimalen Daten

Sie können diemin- undmax-Attribute verwenden, um die vom Benutzer auswählbaren Daten einzuschränken. Im folgenden Beispiel setzen wir ein Mindestdatum von2017-04-01 und ein Höchstdatum von2017-04-30:

<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 Jahresangaben des Textfeldes sind nicht editierbar, und Daten außerhalb des Aprils 2017 können im Auswahlanzeige-Widget nicht ausgewählt werden.

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

Steuerung der Eingabegröße

<input type="date"> unterstützt keine Formgrößenattribute wiesize. Verwenden SieCSS, um es zu skalieren.

Validierung

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

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

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

Werfen wir einen Blick auf ein Beispiel zu Mindest- und Höchstdaten, und machen wir ein 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></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) abzuschicken, zeigt der Browser einen Fehler an. Probieren Sie jetzt das Beispiel aus:

Hier ist das CSS, das im obigen Beispiel verwendet wird. Wir verwenden die:valid und:invalidPseudo-Elemente, um ein Symbol neben dem Eingabefeld hinzuzufügen, basierend darauf, ob der aktuelle Wert gültig ist. Wir mussten das Symbol auf einem<span> neben dem Eingabefeld platzieren, nicht auf dem Eingabefeld selbst, da zumindest im Chrome der generierte Inhalt des Eingabefeldes innerhalb der Formularkontrolle platziert wird und nicht effektiv gestylt oder gezeigt werden kann.

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 einen Datumsauswahldialog mit dem nativen<input type="date">-Picker.

HTML

Das HTML sieht folgendermaßen aus:

<form>  <div>    <label for="bday">Enter your birthday:</label>    <input type="date" name="bday" />    <span></span>  </div></form>

CSS

Das CSS sieht folgendermaßen aus:

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

Ergebnisse

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das generische<input>-Element und die Schnittstelle zur Manipulation,HTMLInputElement
• Datum und Zeit Auswahl Tutorial
• In HTML verwendete Datums- und Zeitformate