HTMLInputElement: valueAsDate 属性

HTMLInputElement 接口的 valueAsDate 属性表示 <input> 元素的当前值作为 Date，如果无法转换，则为 null。

此属性也可以直接设置，例如根据某些条件设置默认日期。如果提供的值既不是 null 也不是 Date 对象，则会抛出 TypeError。如果提供的值为 null 或 无效日期，则输入值将设置为空字符串。

此属性在访问非日期或时间类型的输入时始终返回 null。在对这种输入设置此属性时，将抛出 InvalidStateError DOMException。

值

如果无法转换，则为 Date 对象或 null。

示例

检索日期值

此示例演示了在类型为 week 的 <input> 上访问 valueAsDate 属性。

HTML

我们包含一个类型为 week 的 <input>

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

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

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

JavaScript

当没有选择日期或时间时，空输入解析为 null。每次进行选择时，都会触发 change 事件，更新显示表单控件的 HTMLInputElement.value 与该值作为日期的比较结果的 <pre> 内容。

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

结果

使用 Date 方法

此示例演示了将 Date 方法直接应用于类型为 date 的 <input> 的 valueAsDate 属性。

HTML

我们包含一个类型为 date 的 <input>

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

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

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

JavaScript

当没有选择日期时，空字符串解析为 null。每次进行选择时，都会触发 change 事件。然后，我们使用 Date 对象的 toLocaleDateString() 方法填充日志，显示选择的日期格式。

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

结果

日期可能是由于您的本地时区而导致的休息日。

规范

规范
HTML 标准
# dom-input-valueasdate-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅