HTMLInputElement: valueAsDate-Eigenschaft

Ein Date-Objekt oder null, wenn eine Umwandlung unmöglich ist. Das zurückgegebene Datum sollte immer als UTC-Zeit interpretiert werden—zum Beispiel mit Methoden wie getUTCDate() anstelle von getDate(). 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 Eingabetypen month, date und week geben ein UTC-Datum zurück, das den ersten Moment des eingegebenen Zeitraums darstellt—d.h. sie sind immer Mitternacht in UTC. Für month ist das Datum der erste Tag des Monats. Für week ist das Datum der Montag der Woche. Der Eingabetyp time hat das Datum immer auf 1970-01-01 gesetzt.

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

Dieses Beispiel zeigt den Zugriff auf die valueAsDate-Eigenschaft auf einem <input> des Typs week.

HTML

Wir fügen ein <input> des Typs week ein:

<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 Zeit ausgewählt ist, ergibt die leere Eingabe null. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein change-Ereignis ausgelöst, das den Inhalt des <pre> aktualisiert, der den HTMLInputElement.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

Dieses Beispiel zeigt die Anwendung von Date-Methoden direkt auf die valueAsDate-Eigenschaft eines <input> des Typs date.

HTML

Wir fügen ein <input> des Typs date ein:

<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, ergibt die leere Eingabe null. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein change-Ereignis ausgelöst. Wir füllen dann das Log mit dem gewählten Datum, formatiert mit der toLocaleDateString()-Methode des Date-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.

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