HTML-Datumseingabe: value, min, max, step und Datumsformat
HTML <input type="date"> bietet eine Steuerung für Jahr, Monat und Tag. Sein Kalenderaussehen und die angezeigte Reihenfolge können je nach Browser und Gebietsschema variieren, aber Wert und übermittelte Werte werden auf YYYY-MM-DD normalisiert. Sie enthalten keine Zeit oder Zeitzone.
Legen Sie ein Anfangsdatum und den erlaubten Bereich fest
Verwenden Sie value für das Anfangsdatum und min/max für die frühesten und spätesten zulässigen Daten. Beide Grenzen sind eingeschlossen. Attribute benötigen gültige Datumszeichenfolgen statt lokalisierter Anzeigetexte wie „20. Mai 2030“. Ungültige Mindest- oder Maximalwerte können die beabsichtigte Einschränkung nicht erzwingen.
name ist der übermittelte Feldname und id verknüpft das Label. Verwenden Sie required für eine Pflichtangabe. Eine Bereichsvorgabe bewirkt nicht, dass jeder Browser die Datumseingabe auf die gleiche Weise verhindert; ein direkt eingegebenes Datum außerhalb des Bereichs scheitert an der Validierung der Einschränkung.
Vollständiges Beispiel: Überprüfen Sie die Datumszeichenfolge und die Gültigkeit
Speichern Sie das folgende Dokument als date-demo.html und öffnen Sie es in einem Browser. Es zeigt ein innerhalb des Mai 2030 gewähltes Datum zur Übung an, ohne eine Buchung vorzunehmen oder Daten an einen Server zu senden.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datumseingaben prüfen</title>
</head>
<body>
<h1>Besuchsdatum üben</h1>
<form id="demo">
<label for="visit">Besuchsdatum (Mai 2030, erforderlich)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">Wert anzeigen</button>
<button type="reset">Zurücksetzen</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Senden Sie das Anfangsdatum. Die Ausgabe lautet:
visit = 2030-05-20 - Wählen Sie ein anderes Datum im Mai und senden Sie es, um dessen Datumszeichenfolge anzuzeigen. Ein Datum außerhalb des Bereichs wird durch min/max-Validierung blockiert.
- Löschen Sie das Datum und senden Sie es: die Pflichtfeld-Validierung blockiert es. Zurücksetzen kehrt auf den 20. Mai zurück.
Die step-Einheit ist Tage und ihr Standardwert ist 1. Ändern Sie im Beispiel nur den Schritt auf 7: Der 1. Mai, das Mindestdatum, wird zur Basis, sodass der 1., 8., 15., 22. und 29. Mai in das Intervall passen. Der ursprüngliche Wert vom 20. Mai passt nicht mehr. Vergleichen Sie eine gültige Auswahl vom 8. Mai und setzen Sie dann den Schritt wieder auf 1, um jeden Tag zuzulassen. Eine einzelne Schritt-Einstellung implementiert keinen Geschäftskalender mit Wochenenden oder Feiertagen.
Anzeigeformate, Zeitzonen und Servervalidierung
Setzen Sie keine Schrägstriche oder lokalisierten Zeichenfolgen in den Wert, um den datenspezifischen Kalender-Auswahlbereich zu ändern. Wenn Sie nur ein Kalenderdatum benötigen, vermeidet das Behandeln als Zeichenfolge unnötige Zeitzonenumrechnungen. Daten, die auch eine Uhrzeit benötigen, erfordern mehr als nur das Datum und eine separate Zeitzonenregel.
Steuern Sie die Breite mit CSS anstelle eines Größenattributs. Stellen Sie ein Label und eine Bereichserklärung bereit und validieren Sie tatsächliche Daten, Schaltjahre, Bereiche und die fachliche Verfügbarkeit auf dem Server für nicht unterstützte Steuerelemente oder Anfragen, die Browser-Prüfungen umgehen. Die Auswahl eines Datums bucht keinen Platz und bestätigt nicht die aktuelle Buchungsverfügbarkeit. Die MDN-Datumsangabe erklärt die Attributregeln.
