HTMLInputElement: valueAsDate-Eigenschaft

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.

Die valueAsDate-Eigenschaft des HTMLInputElement-Interfaces repräsentiert den aktuellen Wert des <input>-Elements als Date, oder null, wenn die Umwandlung nicht möglich ist.

Diese Eigenschaft kann auch direkt gesetzt werden, um beispielsweise ein Standarddatum basierend auf einer Bedingung zu setzen. Wenn der bereitgestellte Wert weder null noch ein Date-Objekt ist, wird ein TypeError ausgelöst. Wenn der bereitgestellte Wert null oder ein ungültiges Datum ist, wird der Eingabewert auf den leeren String gesetzt.

Diese Eigenschaft gibt immer null zurück, wenn sie auf einem Eingabeelement ohne datums- oder zeitbasierte Typen aufgerufen wird. Beim Setzen dieser Eigenschaft auf ein solches Eingabeelement wird ein InvalidStateError-DOMException ausgelöst.

Wert

Ein Date-Objekt oder null, wenn eine Umwandlung unmöglich ist.

Beispiele

Abrufen eines Datumswerts

Dieses Beispiel zeigt, wie die valueAsDate-Eigenschaft auf einem <input> vom Typ week abgerufen wird.

HTML

Wir fügen ein <input> vom Typ week ein:

html
<label for="date">Pick a date and time:</label>

<input name="date" id="date" type="week" />

<pre id="log"></pre>

JavaScript

Wenn kein Datum oder keine Uhrzeit ausgewählt ist, löst die leere Eingabe null auf. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein change-Ereignis ausgelöst, das den <pre>-Inhalt aktualisiert, der den HTMLInputElement.value des Formularsteuerelements im Vergleich zu diesem Wert als Datum zeigt.

js
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}`;
});

Ergebnisse

Verwenden von Datumsmethoden

Dieses Beispiel zeigt die direkte Anwendung von Date-Methoden auf die valueAsDate-Eigenschaft eines <input> vom Typ date.

HTML

Wir fügen ein <input> vom Typ date ein:

html
<label for="date2">Pick a date:</label>

<input name="date2" id="date2" type="date" />

<pre id="log"></pre>

JavaScript

Wenn kein Datum ausgewählt ist, löst der leere String null auf. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein change-Ereignis ausgelöst. Wir füllen dann das Protokoll mit dem ausgewählten Datum aus, formatiert mit der toLocaleDateString()-Methode des Date-Objekts.

js
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}`;
  }
});

Ergebnisse

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

Spezifikationen

Specification
HTML Standard
# dom-input-valueasdate-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch