<input type="week">

在HTML中，<input type="week">控件允许通过选择日期的方式产生当前日期所在的周数，该周数的取值范围为1-52或53。

<input type="week">的输入格式

周数选择控件的格式如下：

其在谷歌浏览器中的显示格式如下：

其在Edge浏览器中的显示格式如下：

在谷歌浏览器中点击控件中的小图标，可以弹出如下界面：

在Edge浏览器中的显示界面如下

不同浏览器对该控件上的显示有一定的差异。目前，仅有谷歌浏览器、Edge浏览器和Opera浏览器支持该控件。

在不支持该控件的浏览器中，该控件将变为普通的文本输入框，即变成为<input type="text">的形式。

从谷歌浏览器和Edge浏览器中的显示界面可以看出，该控件的界面中左侧显示了周数，右侧为对应的日期。

用户可以通过点击左侧的周数或右侧的日期，则可以完成输入，下面两图分别显示谷歌浏览器和Edge浏览器选择后的效果。

谷歌浏览器中的结果                               Edge浏览器中的结果

value属性

value属性是一个表示周数和年份的字符串，其用于给出<input type="week">的默认值。value属性值是某年份的特定周。一个有效的value属性字符串是一个四位年份加上一个连接符“-”，然后是大写字母“W”，最后是该年份的2位周数。其形式为：2023-W31。

周数的取值范围在01和53之间。每周都是从星期一开始，到星期日结束。这有可能1月份的前几天被认为是上一年的一部分，而12月份的最后几天可能是下一年的一部分。

一年的第1周是指包含该年第一个星期四的那一周。

满足以下情况，一年含有53周：

• 日历的第一天（1月1日）是星期四，或
• 日历的第一天（1月1日）是星期三且该年为闰年。

value属性的一个例子如下：

 其在谷歌浏览器中的显示效果如下：

虽然，在浏览器中以用户可以理解的形式展现出相应的值，但在表单提交时，其总是将值转换成yyyy-Www的格式，如该例中在浏览器中虽然显示的是“2023 年第 08 周”，但在表单提交后，传递到服务器端的值是“2023-W08”的格式。

max属性

<input type="week">控件的max属性给出控件的最大的年份和周数。

在给定max属性后，如果value属性的值超过此值，则该控件将无法通过约束验证。

如果给定的max属性值是无效的字符串，则该属性不起作用，即没有最大值限制。

max属性的值应该大于或等于min属性设置的值。

下面的例子演示了max属性的使用方法。

 其在点击控件中的小图标后，其显示的界面如下：

上图在往下滚动后，可以看到，2023年31周之后的日期是无法选择的。

min属性

min属性用于给出<input type="week">控件可接受的最小年份和周数。

如果value属性的值比min属性小，则无法通过控件验证。

如果min属性的值设置的是无效的字符串，则该属性不起作用，即控件没有最小值限制。

min属性的值应该小于或等于max属性的值。

在谷歌浏览器中点击控件中的小图标后，显示的界面如下图所示：

从上图可以看出30周之前的周数是无法被选择的。

step属性

step属性用于设置<input type="week">控件可选择周数的间隔值。step属性是一个大于0的整数值，其单位为周，默认值为1。

如果该属性的值设置无效，则该属性将不起作用。

当设置了min属性时，其值以min属性的值为起点；

如果设置max属性，其值以max属性的值为终点；

如果设置了value属性，则该属性以value属性的值为参考点。

如果没有设置任何属性，则控件会给出一定的默认值。

以上示例在谷歌浏览器中加载完毕后的显示效果如下图所示：

第1个例子的界面如下图所示：

下图是设置了step属性和min属性的效果

下图是设置了max属性和step属性的效果

下面是只设置value属性的界面效果：

下面设置了min属性、max属性和value属性的效果

除上述属性外，<input type="week">控件还支持readonly属性、disabled属性、required等属性。

上述例子，读者可以点击这里查看。

相关阅读推荐：

<input type="time">

<input type="date">

<input type="datetime-local">

<input type="text">

<input type="radio">

<input type="checkbox">

<input type="color">

<input type="submit"> | <input type="reset"> | <input type="button">

如对以上内容有疑问或文中有错误之处，请留言指出。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/html5/2023/6618.html。