HTMLInputElement: valueAsDate-Eigenschaft

Ein Date-Objekt oder null, wenn eine Konvertierung unmöglich ist. Das zurückgegebene Datum sollte immer als UTC-Zeit interpretiert werden – zum Beispiel, indem Methoden wie getUTCDate() anstelle von getDate() verwendet werden. Wenn Sie nicht vorsichtig sind, kann das Ergebnis um einen Tag abweichen – zum Beispiel, wenn der Benutzer in einer negativen UTC-Zeitverschiebung lebt (zum Beispiel in den USA), dann führt die Interpretation des Datums als lokales Datum zum vorherigen Tag von dem, was 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 – das heißt, sie sind immer Mitternacht in UTC. Bei month ist das Datum der erste Tag des Monats. Bei 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) darstellt, während Date-Objekte einen absoluten Zeitpunkt repräsentieren. Einige Browser bieten jedoch möglicherweise eine nicht standardmäßige Implementierung. WHATWG arbeitet daran, die Temporal-API mit den Datums-/Zeiteingaben zu integrieren, um diesen Anwendungsfall zu berücksichtigen.

Dieses Beispiel demonstriert den Zugriff auf die valueAsDate-Eigenschaft eines <input> vom Typ week.

HTML

Wir fügen ein <input> vom Typ 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 Uhrzeit ausgewählt ist, ergibt das leere Eingabefeld null. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein change-Ereignis ausgelöst, das den <pre>-Inhalt aktualisiert und 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 direkte Anwendung von Date-Methoden auf die valueAsDate-Eigenschaft eines <input> vom Typ date.

HTML

Wir fügen ein <input> vom Typ 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 der leere String null. Jedes Mal, wenn eine Auswahl getroffen wird, wird ein change-Ereignis ausgelöst. Wir füllen dann das Protokoll mit dem ausgewählten Datum, formatiert mithilfe 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