<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 type="date"
erstellen Eingabefelder, die es dem Benutzer ermöglichen, ein Datum einzugeben. Das Erscheinungsbild der Datumsauswahl-Eingabeoberfläche variiert je nach Browser und Betriebssystem. Der Wert wird auf das Format yyyy-mm-dd
normalisiert.
Der resultierende Wert enthält das Jahr, den Monat und den Tag, jedoch nicht die Zeit. Die Eingabetypen time und datetime-local unterstützen Zeit- und Datum+Zeit-Eingaben.
Probieren Sie es aus
Wert
Ein String, der das im Eingabefeld eingegebene Datum darstellt. Das Datum wird gemäß dem Datumsformat formatiert.
Sie können einen Standardwert für die Eingabe mit einem Datum im value
-Attribut 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 Sprache des Browsers des Benutzers formatiert, aber der analysierte value
wird immer als yyyy-mm-dd
formatiert.
Sie können den Datumswert in JavaScript mit den Eigenschaften value
und valueAsNumber
des HTMLInputElement
erhalten 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
date
ist, und setzt seinen Wert auf 2017-06-01
(1. Juni 2017). Anschließend wird dieser Wert in String- und Zahlenformaten zurückgelesen.
Zusätzliche Attribute
Die für alle <input>
-Elemente gemeinsamen Attribute gelten auch für date
-Eingaben, beeinflussen jedoch möglicherweise nicht deren Darstellung. Zum Beispiel funktionieren size
und placeholder
möglicherweise nicht. date
-Eingaben haben die folgenden zusätzlichen Attribute.
max
Das späteste akzeptierte Datum. Wenn der im 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 eine Datumszeichenkette sein, die später oder gleich der im min
-Attribut ist.
min
Das früheste akzeptierte Datum. Wenn der im Element eingegebene value
davor 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 eine Datumszeichenkette sein, die früher oder gleich der im max
-Attribut ist.
step
Das step
-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wert any
, der unten beschrieben wird. Nur Werte, die dem Basiswert für das Verändern (min
falls angegeben, value
sonst und einem geeigneten Standardwert, wenn keiner von beiden vorliegt) entsprechen, sind gültig.
Ein String-Wert von any
bedeutet, dass kein Verändern impliziert ist und jeder Wert erlaubt ist (unter Ausschluss anderer Einschränkungen wie min
und max
).
Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Veränderkonfiguration entsprechen, kann der Benutzeragent auf den nächstgelegenen gültigen Wert runden, wobei Zahlen in positiver Richtung bevorzugt werden, wenn es zwei gleich nahe Optionen gibt.
Für date
-Eingaben wird der Wert von step
in Tagen angegeben und als Anzahl von Millisekunden behandelt, die 86.400.000 mal dem step
-Wert entsprechen (der zugrunde liegende numerische Wert ist in Millisekunden). Der Standardwert von step
ist 1, was 1 Tag entspricht.
Hinweis:
Das Angeben von any
als Wert für step
hat denselben Effekt wie 1
für date
-Eingaben.
Verwendung von Datumseingaben
Datumseingaben bieten eine einfache Benutzeroberfläche zum Auswählen von Daten und normalisieren das an den Server gesendete Datenformat unabhängig von der Sprache des Benutzers.
In diesem Abschnitt betrachten wir grundlegende und dann komplexere Anwendungen von <input type="date">
.
Grundlegende Verwendung von Datum
Die grundlegendste Verwendung von <input type="date">
umfasst 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 sendet das eingegebene Datum unter dem Schlüssel bday
an https://example.com
— was zu einer URL wie https://example.com/?bday=1955-06-08
führt.
Festlegen von maximalen und minimalen Daten
Sie können die Attribute min
und max
verwenden, um die Daten zu beschränken, die vom Benutzer ausgewählt werden können. 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 Monats- und Jahresanteile des Texteingabefelds sind nicht bearbeitbar, und Daten außerhalb des Aprils 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 bei jeder Erhöhung des Datums übersprungen werden (z.B. um nur Samstage auswählbar zu machen).
Steuerung der Eingabegröße
Validierung
Standardmäßig validiert <input type="date">
den eingegebenen Wert nicht über sein Format hinaus. Die Schnittstellen lassen im Allgemeinen nicht zu, dass etwas eingegeben wird, das kein Datum ist — was hilfreich ist.
Wenn Sie 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, wenn Sie versuchen, ein außerhalb der Grenzen liegendes Datum zu übermitteln.
Sie können auch das required
-Attribut verwenden, um das Ausfüllen des Datums obligatorisch zu machen — ein Fehler wird angezeigt, wenn Sie versuchen, ein leeres Datumsfeld zu übermitteln.
Lassen Sie uns ein Beispiel für Mindest- und Höchstdaten betrachten und außerdem ein Feld erforderlich machen:
<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) zu übermitteln, zeigt der Browser einen Fehler an. Experimentieren Sie jetzt mit dem Beispiel:
Hier ist das in obigem Beispiel verwendete CSS. Wir verwenden die Pseudo-Elemente :valid
und :invalid
, um ein Symbol neben dem Eingabefeld hinzuzufügen, je nachdem, ob der aktuelle Wert gültig ist. Wir mussten das Symbol auf einem <span>
neben dem Eingabefeld und nicht auf dem Eingabefeld selbst platzieren, da zumindest in Chrome der generierte Inhalt des Eingabefelds 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: "✓";
}
Warnung: Die clientseitige Formularvalidierung ersetzt nicht die Validierung auf dem Server. Es ist leicht für jemanden, das HTML zu ändern oder Ihr HTML vollständig zu umgehen und die Daten direkt an Ihren Server zu übermitteln. Wenn Ihr Server die empfangenen Daten nicht validiert, könnten fehlerhaft formatierte Daten, zu große Daten, falsche Typen usw. zu katastrophalen Folgen führen.
Beispiele
In diesem Beispiel erstellen wir einen Datumsauswahler mithilfe des nativen <input type="date">
-Auswahlers.
HTML
Das HTML sieht wie folgt 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 wie folgt 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 gemeinsame Attribute |
autocomplete ,
list ,
readonly ,
step
|
IDL-Attribute |
value ,
valueAsDate ,
valueAsNumber
|
DOM-Schnittstelle | [`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 Standard # date-state-(type=date) |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das generische
<input>
-Element und die Schnittstelle zu dessen Manipulation,HTMLInputElement
- Datum- und Zeit-Auswahl Tutorial
- Datum- und Zeitformate, die in HTML verwendet werden