HTMLInputElement: valueAsDate 属性
HTMLInputElement 接口的 valueAsDate 属性表示 <input> 元素的当前值，形式为 Date 对象，如果无法转换则为 null。
此属性也可以直接设置，例如基于某些条件设置默认日期。如果提供的值既不是 null 也不是 Date 对象，则会抛出 TypeError。如果提供的值是 null 或 无效日期，则输入值为设置为空字符串。
当在非日期或时间输入上访问此属性时，它始终返回 null。当在此类输入上设置此属性时，会抛出 InvalidStateError DOMException。
值
一个 Date 对象，如果无法转换则为 null。返回的日期应始终解释为 UTC 时间——例如，使用 getUTCDate() 等方法而不是 getDate()。如果不小心，结果可能会相差 1 天——例如，如果用户居住在 UTC 偏移量为负数（例如美国）的地区，则将日期解释为本地日期将导致比用户选择的日期早一天。
month、date 和 week 输入类型返回一个 UTC 日期，该日期表示输入时间段的第一个瞬间——即，它们始终是 UTC 午夜。对于 month，日期是该月份的第一天。对于 week，日期是该周的星期一。time 输入类型始终将日期设置为 1970-01-01。
datetime-local 输入类型不支持 valueAsDate 属性，因为它表示本地时区中的日期和时间（墙上时钟时间），而 Date 对象表示绝对时间点。但是，某些浏览器可能提供非标准实现。WHATWG 正在努力将 Temporal API 与日期/时间输入集成，以处理这种情况。
示例
检索日期值
此示例演示了如何访问类型为 week 的 <input> 元素的 valueAsDate 属性。
HTML
我们包含了一个类型为 week 的 <input> 元素
<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> 内容。
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> 元素
<label for="date2">Pick a date:</label>
<input name="date2" id="date2" type="date" />
<pre id="log"></pre>
JavaScript
当未选择日期时，空字符串解析为 null。每次做出选择时，都会触发一个 change 事件。然后，我们使用 Date 对象的 toLocaleDateString() 方法格式化所选日期，并将其填充到日志中。
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 |
浏览器兼容性
加载中…