Signatur
Beschreibung
Mit valueAsDate arbeitet man direkt mit Date-Objekten und muss die Zeichenkette aus value (z. B. "2024-03-15") nicht selbst zerlegen. Die Eigenschaft funktioniert mit den Eingabetypen date, month, week und time.
Lesen: Ist das Feld leer, der Wert ungültig oder passt der Typ nicht, liefert die Eigenschaft null. Sonst gibt sie ein neues Date zurück. Dieses Datum steht immer in UTC: Aus 2024-03-15 wird 2024-03-15T00:00:00.000Z. Bei time wird der 1. Januar 1970 (UTC) mit der eingegebenen Uhrzeit verwendet.
Schreiben: Weist man ein Date zu, wird es in das passende Format umgewandelt und in value geschrieben. Auch dabei zählen die UTC-Anteile des Datums. Die Zuweisung von null oder einem ungültigen Datum leert das Feld.
Typische Anwendungen: ein Vorgabedatum setzen, Zeiträume zwischen zwei Datumsfeldern berechnen oder Eingaben prüfen, ohne Zeichenketten selbst zu zerlegen.
Rückgabewert
Date-Objekt in UTC oder null, wenn das Feld leer oder ungültig ist oder valueAsDate für diesen Typ nicht gilt. Jeder Lesezugriff erzeugt ein neues Objekt.Beispiele
Datum aus einem Datumsfeld lesen
// <input type="date" id="geburtstag" value="2024-03-15">
const feld = document.querySelector('#geburtstag');
const datum = feld.valueAsDate;
if (datum) {
console.log(datum.toISOString());
// UTC-Methoden nutzen, damit die Zeitzone keinen Tag verschiebt
console.log(datum.getUTCDate(), datum.getUTCMonth() + 1, datum.getUTCFullYear());
} else {
console.log('Kein gültiges Datum eingegeben');
}Heutiges lokales Datum als Vorgabe setzen (ohne Zeitzonenfehler)
// <input type="date" id="termin">
const termin = document.querySelector('#termin');
const jetzt = new Date();
// Lokales Kalenderdatum als UTC-Mitternacht darstellen
termin.valueAsDate = new Date(Date.UTC(
jetzt.getFullYear(), jetzt.getMonth(), jetzt.getDate()
));
console.log(termin.value);Anzahl der Übernachtungen zwischen zwei Datumsfeldern
// <input type="date" id="anreise" value="2024-07-01">
// <input type="date" id="abreise" value="2024-07-08">
const anreise = document.querySelector('#anreise');
const abreise = document.querySelector('#abreise');
const naechte = () => {
const von = anreise.valueAsDate;
const bis = abreise.valueAsDate;
if (!von || !bis) return null;
return Math.round((bis - von) / 86_400_000);
};
console.log(`${naechte()} Nächte`);
[anreise, abreise].forEach((el) =>
el.addEventListener('change', () => console.log(naechte()))
);Uhrzeit aus einem Zeitfeld lesen und setzen
// <input type="time" id="beginn" value="09:30">
const beginn = document.querySelector('#beginn');
console.log(beginn.valueAsDate.toISOString());
// Beginn um 90 Minuten verschieben
const neu = new Date(beginn.valueAsDate.getTime() + 90 * 60_000);
beginn.valueAsDate = neu;
console.log(beginn.value);
// Feld leeren
beginn.valueAsDate = null;
console.log(JSON.stringify(beginn.value));// Wichtig · Fallstricke
- Zeitzonen-Falle: Der Wert wird als UTC gelesen und geschrieben.
datum.getDate()kann in Zeitzonen westlich von UTC den Vortag liefern. Verwenden SiegetUTCDate(),getUTCMonth()usw. Beim Setzen führtel.valueAsDate = new Date()kurz nach Mitternacht (Ortszeit) je nach Zeitzone zum falschen Tag. Besser:Date.UTC(...)mit den lokalen Datumsteilen. datetime-localwird nicht unterstützt: Bei diesem Typ und bei allen Nicht-Datumstypen (z. B.text) liefert das Lesennull. Das Setzen wirft eineDOMExceptionvom TypInvalidStateError. Fürdatetime-localnutzen SievalueodervalueAsNumber.- Wer einen Wert zuweist, der weder
Datenochnullist (z. B. eine Zeichenkette), löst einenTypeErroraus. - Jeder Lesezugriff liefert ein neues Objekt. Ändert man dieses
Date(z. B. mitsetUTCDate()), bleibt das Feld unverändert. Das Ergebnis muss wieder zugewiesen werden. min,maxundstepwerden beim Setzen nicht erzwungen. Prüfen Sie das Ergebnis mitcheckValidity().- Kompatibilität: Die Eigenschaft gibt es in allen aktuellen Browsern. Wie Typen wie
monthundweekdargestellt werden, ist unterschiedlich; in Firefox und Safari erscheinen sie teils als Textfeld. Dann liefertvalueAsDatenur bei korrekt formatierter Eingabe ein Datum.