week类型的<input>元素  创建输入字段，允许轻松输入一年，加上当年内的周数（例如第1周到第52周）。

控件的用户界面从浏览器到浏览器有所不同，跨浏览器支持目前有限，只有Chrome / Opera和Edge支持。在不支持的浏览器中，控件会优雅地降低到简单<input type="text">。

<input id="week" type="week">

在Chrome / Opera中，week控件提供了填充星期和年份值的插槽，更容易选择它们的日历UI以及用于清空控件的十字按钮。

Edge浏览器 month控制更精细一点，打开滑动卷轴的周年和年份选择器。

值

A DOMString表示输入中输入的周/年的值。您可以通过在value属性中包含一个值来设置输入的默认值，如下所示：

<label for="week">What week would you like to start?</label><input id="week" type="week" name="week" value="2017-W01">

有一点需要注意的是，显示的格式可能与实际不同value，总是格式化yyyy-Www。例如，当上述值被提交给服务器时，浏览器将显示为Week 01, 2017，但是提交的值总是看起来像week=2017-W01。

您还可以使用该HTMLInputElement.value属性获取和设置JavaScript中的值，例如：

var weekControl = document.querySelector('input[type="week"]');weekControl.value = '2017-W45';

使用week 输入

周输入听起来很方便 - 它们为选择周提供了一个简单的用户界面，并且无论用户的浏览器或区域设置如何，它们都将发送到服务器的数据格式标准化。但是，<input type="week">由于所有浏览器都无法保证浏览器的支持，因此存在一些问题。

我们将考虑基本的和更复杂的用途<input type="week">，然后就减轻浏览器支持问题提供建议（请参阅处理浏览器支持）。

week的基本用法

最简单的使用<input type="week">涉及基本<input>和<label>元素组合，如下所示：

<form>  <label for="week">What week would you like to start?</label>  <input id="week" type="week" name="week"></form>

控制输入大小

<input type="week">不支持表单大小属性，如size。你将不得不求助于CSS的大小需求。

使用step属性

您应该可以使用该step属性来改变每增加一个星期的数量，但是它对支持浏览器似乎没有任何影响。

验证

默认情况下，<input type="week">不对输入的值应用任何验证。UI的实现通常不会让你输入任何不是一周/一年的东西 - 这是有帮助的 - 但是你仍然可以不填写任何值然后提交，你可能想要限制可选周的范围。

设置最大和最小周

您可以使用min和max属性来限制用户可以选择的有效周数。在下面的例子中，我们设置最小值Week 01, 2017和最大值Week 52, 2017：

<form>  <label for="week">What week would you like to start?</label>  <input id="week" type="week" name="week"
         min="2017-W01" max="2017-W52">  <span class="validity"></span></form>

这是上面例子中使用的CSS。这里我们利用:valid和:invalidCSS属性来根据当前值是否有效来设置输入的样式。我们必须将图标放在<span>输入旁边，而不是输入本身，因为在Chrome中生成的内容放置在表单控件中，无法有效地进行样式化或显示。

div {
  margin-bottom: 10px;
  position: relative;}input[type="number"] {
  width: 100px;}input + span {
  padding-right: 30px;}input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;}input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;}

结果是2017年W01和W52之间只有几个星期将被视为有效，并可以在支持的浏览器中进行选择。

要求输入星期值

此外，您可以使用该required属性在本周强制填写。因此，如果您尝试提交空的星期字段，支持的浏览器将显示错误。

我们来看一个例子 - 在这里我们已经设定了最小和最大星期，并且还要求这个字段：

<form>  <div>    <label for="week">What week would you like to start?</label>    <input id="week" type="week" name="week"
         min="2017-W01" max="2017-W52" required>    <span class="validity"></span> 
  </div>  <div>      <input type="submit" value="Submit form">  </div></form>

如果您尝试提交没有值的表单，浏览器将显示错误。现在尝试玩这个例子：

这里是不使用支持浏览器的人的截图：

重要说明：HTML表单验证 不能 取代服务器端脚本，以在被允许进入数据库之前确保输入的数据格式正确。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。

处理浏览器支持

如上所述，在编写本文时使用周输入的主要问题是浏览器支持 -  Safari和Firefox不支持在桌面上，旧版本的IE不支持它。

移动平台（如Android和iOS）非常好地利用了这种输入类型，提供了专业的UI控件，使得在触摸屏环境中选择值变得非常简单。例如，weekAndroid版Chrome 的选取器如下所示：

不支持的浏览器会优雅地降级为 text input，但是这会在用户界面的一致性（所呈现的控件将不同）和数据处理方面产生问题。

第二个问题是最严重的 - 就像我们之前提到的那样，week输入的实际值总是被格式化yyyy-Www。另一方面，通过文本输入，浏览器默认不知道日期的格式，人们可以使用多种方式写周值，例如：

• Week 1 2017

• Jan 2-8 2017

• 2017-W01

• etc.

目前以跨浏览器方式处理表单时间的最佳方法是让用户在单独的控件中输入小时数和分钟数（如果需要，可以输入秒数）（<select>元素正在流行 - 请参阅下面的实现），或使用JavaScript库（如jQuery日期选择器）和jQuery timepicker插件。

例子

在这个例子中，我们创建了两组用于选择周的UI元素 - 一个本地创建的选择器<input type="week">，以及一组两个<select>元素在旧版浏览器中选择不支持本机输入的周/年。

HTML看起来像这样：

<form>  <div class="nativeWeekPicker">    <label for="week">What week would you like to start?</label>    <input id="week" type="week" name="week"
           min="2017-W01" max="2018-W52" required>    <span class="validity"></span>  </div>  <p class="fallbackLabel">What week would you like to start?</p>  <div class="fallbackWeekPicker">    <div>      <span>        <label for="week">Week:</label>        <select id="fallbackWeek" name="week">        </select>      </span>      <span>        <label for="year">Year:</label>        <select id="year" name="year">          <option value="2017" selected>2017</option>          <option value="2018">2018</option>        </select>      </span>    </div>  </div></form>

星期值是动态生成的。

代码的另一部分，可能会感兴趣的是功能检测代码 - 检测浏览器是否支持<input type="week">，我们创建一个新的<input>元素，将其设置type为week，然后立即检查它type设置为 - 非支持的浏览器将返回text，因为该week类型回落到类型text。如果<input type="week">不支持，我们隐藏本地选择器，<select>而是显示后备选取器UI 。

// define variables
var nativePicker = document.querySelector('.nativeWeekPicker');
var fallbackPicker = document.querySelector('.fallbackWeekPicker');
var fallbackLabel = document.querySelector('.fallbackLabel');
var yearSelect = document.querySelector('#year');
var weekSelect = document.querySelector('#fallbackWeek');
// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'week';
// if it does, run the code inside the if() {} blockif(test.type === 'text') {  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';  // populate the weeks dynamically  populateWeeks();}function populateWeeks() {  // Populate the week select with 52 weeks  for(var i = 1; i <= 52; i++) {    var option = document.createElement('option');
    option.textContent = (i < 10) ? ("0" + i) : i;
    weekSelect.appendChild(option);  }}

规范

浏览器兼容性