DievalueAsDate-Eigenschaft desHTMLInputElement-Interfaces repräsentiert den aktuellen Wert des<input>-Elements als einDate odernull, wenn eine Umwandlung nicht möglich ist.

Diese Eigenschaft kann auch direkt gesetzt werden, zum Beispiel um ein Standarddatum basierend auf einer Bedingung festzulegen. Wenn der bereitgestellte Wert wedernull noch einDate-Objekt ist, wird einTypeError ausgelöst. Wenn der bereitgestellte Wertnull oder einungültiges Datum ist, wird der Eingabewert auf den leeren String gesetzt.

Diese Eigenschaft gibt immernull zurück, wenn sie auf ein Eingabeelement angewendet wird, das nicht auf Datum oder Zeit basiert. Wird diese Eigenschaft auf einem solchen Eingabeelement gesetzt, wird einInvalidStateErrorDOMException ausgelöst.

Wert

EinDate-Objekt odernull, wenn eine Umwandlung unmöglich ist. Das zurückgegebene Datum sollte immer als UTC-Zeit interpretiert werden—zum Beispiel mit Methoden wiegetUTCDate() anstelle vongetDate(). Wenn Sie nicht vorsichtig sind, kann das Ergebnis um 1 abweichen—zum Beispiel, wenn der Benutzer in einer negativen UTC-Zeitzone lebt (zum Beispiel in den USA), wird das Datum als lokales Datum interpretiert, was zum vorherigen Tag führt, als der Benutzer ausgewählt hat.

Die Eingabetypenmonth,date undweek geben ein UTC-Datum zurück, das den ersten Moment des eingegebenen Zeitraums darstellt—d.h. sie sind immer Mitternacht in UTC. Fürmonth ist das Datum der erste Tag des Monats. Fürweek ist das Datum der Montag der Woche. Der Eingabetyptime hat das Datum immer auf1970-01-01 gesetzt.

Der Eingabetypdatetime-local unterstützt dievalueAsDate-Eigenschaft nicht, da er ein Datum und eine Uhrzeit in der lokalen Zeitzone (einewanduhrzeit) repräsentiert, wohingegenDate-Objekte einen absoluten Zeitpunkt repräsentieren. Allerdings bieten einige Browser möglicherweise eine nicht-standardisierte Implementierung.WHATWG arbeitet daran, dieTemporal API mit den Datum-/Zeiteingaben zu integrieren, um diesen Anwendungsfall zu berücksichtigen.

Beispiele

Abrufen eines Datumswertes

Dieses Beispiel zeigt den Zugriff auf dievalueAsDate-Eigenschaft auf einem<input> des Typsweek.

HTML

Wir fügen ein<input> des Typsweek ein:

<label for="date">Pick a date and time:</label><input name="date" type="week" /><pre></pre>

JavaScript

Wenn kein Datum oder keine Zeit ausgewählt ist, ergibt die leere Eingabenull. Jedes Mal, wenn eine Auswahl getroffen wird, wird einchange-Ereignis ausgelöst, das den Inhalt des<pre> aktualisiert, der denHTMLInputElement.value des Formularelements im Vergleich zu diesem Wert als Datum anzeigt.

const logElement = document.getElementById("log");const inputElement = document.getElementById("date");logElement.innerText = `Initial value: ${inputElement.valueAsDate}`;inputElement.addEventListener("change", () => {  logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsDate}`;});

#log {  height: 20px;  padding: 0.5rem;  background-color: #ededed;}

Ergebnisse

Verwenden von Datumsmethoden

Dieses Beispiel zeigt die Anwendung vonDate-Methoden direkt auf dievalueAsDate-Eigenschaft eines<input> des Typsdate.

HTML

Wir fügen ein<input> des Typsdate ein:

<label for="date2">Pick a date:</label><input name="date2" type="date" /><pre></pre>

JavaScript

Wenn kein Datum ausgewählt ist, ergibt die leere Eingabenull. Jedes Mal, wenn eine Auswahl getroffen wird, wird einchange-Ereignis ausgelöst. Wir füllen dann das Log mit dem gewählten Datum, formatiert mit dertoLocaleDateString()-Methode desDate-Objekts.

const logElement = document.getElementById("log");const inputElement = document.getElementById("date2");const options = {  weekday: "long",  year: "numeric",  month: "long",  day: "numeric",};logElement.innerText = `Initial value: ${inputElement.valueAsDate}`;inputElement.addEventListener("change", () => {  if (inputElement.valueAsDate !== null) {    logElement.innerText = `You selected ${inputElement.valueAsDate.toLocaleDateString("en-US", options)}`;  } else {    logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsDate}`;  }});

#log {  height: 20px;  padding: 0.5rem;  background-color: #ededed;}

Ergebnisse

Das Datum kann aufgrund Ihrer lokalen Zeitzone um einen Tag abweichen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input>
• HTMLInputElement.value
• HTMLInputElement.valueAsNumber