<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:
<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:
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:
<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
:
<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
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:
<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.
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:
<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:
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
- Das generische
<input>
-Element und das Interface zur Manipulation,HTMLInputElement
- Anleitung für Datumsauswahl- und Zeiteingabetypen
- In HTML verwendete Datums- und Zeitformate