HTML | DOM 输入周类型属性

在HTML中，我们可以使用<input>元素来创建表单中的输入字段。其中，type属性用来指定输入字段的类型，如文本输入框、密码输入框、单选框、多选框等等。同时，type属性还有一个比较特殊的取值叫做周类型属性。

周类型属性(week)用来创建一个周日期输入字段，它允许用户选择一周的某个日期。周类型属性的输入字段是一个带有周数和年份的日期字段，其中周数用连字符(-)分隔，例如2021-W43(表示2021年的第43周)。

语法

使用周类型属性需要设置type属性为week。

<input type="week">

属性

周类型属性还支持一些附加属性，可以通过DOM来获取或修改它们的值。

value

value属性用来获取或设置周类型输入字段的值。它返回一个字符串，格式为YYYY-Www，其中YYYY为四位年份，W为代表周的字符，ww为两位周数。

const inputField = document.querySelector('input[type="week"]');
// 获取当前日期值
const dateValue = inputField.value;
console.log(dateValue); // 如 2021-W43

// 设置日期值
inputField.value = '2021-W44';

min & max

min和max属性分别用于指定能够选择的周数的范围。它们的值应该和value属性的格式一致，即YYYY-Www。

<input type="week" min="2020-W01" max="2022-W52">

const inputField = document.querySelector('input[type="week"]');

// 获取最小日期
const minDate = inputField.min;
console.log(minDate);

// 设置最大日期
inputField.max = '2023-W01';

事件

周类型输入字段支持一些常见的DOM事件，例如change、focus、blur等等。当输入字段的值发生改变时，会触发change事件。

const inputField = document.querySelector('input[type="week"]');

// 当输入字段的值改变时，输出新的值
inputField.addEventListener('change', (event) => {
  console.log(event.target.value);
});

总结

周类型属性提供了一种简单的方式来让用户选择一周的某个日期。通过DOM，我们可以获取或修改输入字段的属性值，同时对输入字段的变化进行事件监听。