HTMLInputElement: свойство valueAsDate

Свойство valueAsDate интерфейса HTMLInputElement представляет текущее значение элемента <input> в виде объекта Date или null, если преобразование невозможно.

Это свойство также можно задать напрямую, например, для установки значения по умолчанию даты на основе некоторого условия. Если предоставленное значение не является null или объектом типа Date, выбрасывается исключение TypeError. Если предоставленное значение является null или некорректной датой, значение ввода устанавливается в пустую строку.

Это свойство всегда возвращает null при обращении к элементу ввода, не являющемуся элементом даты или времени. При попытке установить это свойство для такого элемента ввода будет выброшено исключение InvalidStateError DOMException.

Объект Date или null в случае невозможности преобразования.

Этот пример демонстрирует доступ к свойству valueAsDate для элемента ввода типа неделя.

HTML

Включаем элемент ввода типа week:

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

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

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

JavaScript

Если дата или время не выбраны, пустой ввод преобразуется в null. Каждый раз при выборе значения генерируется событие change, обновляющее содержимое <pre>, отображающее значение HTMLInputElement.value элемента управления в формате даты.

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

Результаты

Этот пример демонстрирует применение методов Date непосредственно к свойству valueAsDate элемента ввода типа дата.

HTML

Включаем элемент ввода типа date:

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

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

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

JavaScript

Если дата не выбрана, пустая строка преобразуется в null. Каждый раз при выборе значения генерируется событие change. Затем в журнал записывается выбранная дата, отформатированная с помощью метода toLocaleDateString() объекта Date.

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

Результаты

Дата может отличаться из-за местного часового пояса.

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