HTML | DOM 输入日期值属性

在 HTML 中，我们可以使用 <input> 元素来创建输入表单，包括日期选择器。日期选择器允许用户从一个可视化的面板中选择日期，而不必直接输入日期文本。要创建一个日期选择器，必须在 <input> 元素上设置 type 属性为 date。

<input type="date" name="date">

当用户选择一个日期时，该日期将自动填充到文本框中，同时也可以使用 JavaScript 来获取和设置输入日期值属性。

获取输入日期值属性

要获取输入日期的值属性，我们可以使用 valueAsDate 属性。它返回一个 JavaScript Date 对象，其中包含用户选择的日期。

let dateInput = document.querySelector('input[type="date"]');
let selectedDate = dateInput.valueAsDate;
console.log(selectedDate);

设置输入日期值属性

要设置输入日期的值属性，我们可以使用 valueAsDate 或 value 属性。valueAsDate 属性将接受一个 JavaScript Date 对象，而 value 属性将接受一个字符串，如 "2022-01-01"。

// 使用 valueAsDate 属性设置日期
let dateInput = document.querySelector('input[type="date"]');
let newDate = new Date(2022, 0, 1);
dateInput.valueAsDate = newDate;

// 使用 value 属性设置日期
let dateInput2 = document.querySelector('input[type="date"]');
dateInput2.value = "2022-01-01";

注意，valueAsDate 和 value 属性所接受的日期格式必须为 ISO 8601。

其他属性

除了 valueAsDate 和 value 属性外，<input> 元素还有其他一些与日期选择器相关的属性，包括：

• min：设置可选的最小日期。
• max：设置可选的最大日期。
• step：设置可选的日期间隔。

<input type="date" name="date" min="2022-01-01" max="2022-12-31" step="7">