Date Picker in HTML
Ein Datumsfeld, das sich ausfüllen lässt
Beschriftung, Eingabezweck, Grenzwerte: drei Stellen am Datumsfeld.
Anatomie eines Datumsfelds
Eine Eingabe, zwei Darstellungen, derselbe Datumswert
Der Browser lokalisiert die Bedienung. HTML hält Name, Zweck, Grenzen und Übertragungswert stabil.
for="geburtsdatum"id="geburtsdatum"verbindet Feld und Label
autocomplete="bday"nennt den Eingabezweck
min / maxbilden die Regel dieses Formulars ab
Der Browser und das Betriebssystem bestimmen Aussehen und genaue Bedienung.
1985-03-24geburtsdatum=1985-03-24Vier Zustände, die Sie getrennt prüfen
Die sichtbare Kalenderfläche ist nur ein Teil des Felds.
required verhindert das Absenden ohne Wert.
Anzeige lokal, value trotzdem 1985-03-24.
Browserprüfung greift; der Server prüft denselben Bereich erneut.
Der sichtbare Formathinweis bleibt verständlich und erreichbar.
Nativ beginnen, eigene Kalender nur bei echtem Bedarf bauen
Eine Kalendergrafik allein ist noch kein zugänglicher Date Picker.
input type="date"- lokalisierte Eingabeoberfläche
- normalisierter Datumswert
- Grenzprüfung mit
minundmax - mobile Systemoberfläche, sofern angeboten
- nur einen Tag im Tabulatorlauf
- Pfeiltasten für Tage und Wochen
- Ansage beim Monatswechsel
- Escape, Fokusfang und Rückkehr zum Auslöser
Das vollständige native Feld
Die Grenzen sind Beispielregeln dieses Formulars. Ersetzen Sie sie durch Ihren Bereich.
<form method="post" action="/profil">
<label for="geburtsdatum">
Geburtsdatum
</label>
<input
id="geburtsdatum"
name="geburtsdatum"
type="date"
autocomplete="bday"
min="1900-01-01"
max="2026-09-08"
aria-describedby="geburtsdatum-hinweis"
required>
<p id="geburtsdatum-hinweis">
Zulässiger Bereich in diesem Formular:
01.01.1900 bis 08.09.2026. Der Browser
zeigt ein lokales Format; übertragen wird
Jahr-Monat-Tag.
</p>
<button type="submit">
Speichern
</button>
</form>for entspricht idDas sichtbare Label wird zum Namen und vergrößert die anklickbare Fläche.
autocomplete="bday"Unterstützende Browser können ein gespeichertes Geburtsdatum anbieten.
min und maxDie Werte müssen echte Regeln Ihres Angebots abbilden und serverseitig gelten.
Er hilft auch dann, wenn kein Kalender angezeigt wird.
So prüfen Sie es
- Aktivieren Sie das Wort „Geburtsdatum“. Der Fokus wechselt in das verbundene Feld.
- Prüfen Sie Tastatur und Touch in Ihren Zielbrowsern. Kalenderdarstellung und Tastenmodell dürfen sich unterscheiden, das Feld muss jeweils bedienbar bleiben.
- Lesen Sie nach der Eingabe
input.value. Der Wert lautet1985-03-24, unabhängig von der sichtbaren Reihenfolge. - Testen Sie leer, gültig und außerhalb der Grenzen. Zeigen Sie serverseitige Fehler als Text am Feld, auch wenn der Browser bereits prüft.
Aus dem Prüfbericht
Zwei Regeln an einem Feld
Kritisch Das Datumsfeld ohne verbundene Beschriftung Regel label
Der Text über dem Feld steht in einem span. Erst ein label mit for macht ihn zum Namen des Datumsfelds.
Kritisch Ein erfundener Eingabezweck am Geburtsdatum Regel autocomplete-valid
Werte wie „geburtstag“ sind nicht definiert. Für ein Geburtsdatum gilt autocomplete="bday"; unterstützende Browser können damit einen gespeicherten Wert anbieten.
Zum Mitnehmen
Das Datumsfeld, korrigiert
Ein label, ein gültiger Eingabezweck, zwei Grenzen.
Korrektur in 2 Schritten ansehen
Beschriftung mit dem Feld verbinden
Räumliche Nähe genügt nicht. Erst for und id verbinden den sichtbaren Text mit dem Feld und machen ihn zu seinem Namen.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Geburtsdatum</span> <input type="date" name="geburtsdatum">Nachher
<label for="geburtsdatum">Geburtsdatum</label> <input id="geburtsdatum" type="date" name="geburtsdatum">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Geburtsdatum“. Springt der Cursor ins Feld, sitzt die Verbindung.
Eingabezweck und Zeitraum ergänzen
„geburtstag“ ist kein gültiger Wert. bday nennt den Eingabezweck; min und max bilden die fachliche Spanne dieses Formulars ab.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="geburtsdatum">Geburtsdatum</label> <input id="geburtsdatum" type="date" name="geburtsdatum" autocomplete="geburtstag">Nachher
<label for="geburtsdatum">Geburtsdatum</label> <input id="geburtsdatum" type="date" name="geburtsdatum" autocomplete="bday" min="1900-01-01" max="2026-09-08">Markierte Zeilen wurden geändert
So prüfen Sie es Prüfen Sie bei unterstütztem Autofill, ob der Browser ein gespeichertes Geburtsdatum anbietet.