?
This document uses PHP Chinese website manual Release
week類型的<input>元素 創(chuàng)建輸入字段，允許輕松輸入一年，加上當(dāng)年內(nèi)的周數(shù)（例如第1周到第52周）。
控件的用戶界面從瀏覽器到瀏覽器有所不同，跨瀏覽器支持目前有限，只有Chrome / Opera和Edge支持。在不支持的瀏覽器中，控件會(huì)優(yōu)雅地降低到簡(jiǎn)單<input type="text">。
<input id="week" type="week">
在Chrome / Opera中，week控件提供了填充星期和年份值的插槽，更容易選擇它們的日歷UI以及用于清空控件的十字按鈕。
Edge瀏覽器 month控制更精細(xì)一點(diǎn)，打開滑動(dòng)卷軸的周年和年份選擇器。
值 | 表示一周和一年的DOMString，或者為空。 |
|---|---|
活動(dòng) | change and input. |
支持的通用屬性 | autocomplete, list, readonly, and step. |
IDL屬性 | value, valueAsDate, valueAsNumber, list. |
方法 | select(), stepDown(), stepUp(). |
值
A DOMString表示輸入中輸入的周/年的值。您可以通過在value屬性中包含一個(gè)值來(lái)設(shè)置輸入的默認(rèn)值，如下所示：
<label for="week">What week would you like to start?</label><input id="week" type="week" name="week" value="2017-W01">
有一點(diǎn)需要注意的是，顯示的格式可能與實(shí)際不同value，總是格式化yyyy-Www。例如，當(dāng)上述值被提交給服務(wù)器時(shí)，瀏覽器將顯示為Week 01, 2017，但是提交的值總是看起來(lái)像week=2017-W01。
您還可以使用該HTMLInputElement.value屬性獲取和設(shè)置JavaScript中的值，例如：
var weekControl = document.querySelector('input[type="week"]');weekControl.value = '2017-W45';使用week 輸入
周輸入聽起來(lái)很方便 - 它們?yōu)檫x擇周提供了一個(gè)簡(jiǎn)單的用戶界面，并且無(wú)論用戶的瀏覽器或區(qū)域設(shè)置如何，它們都將發(fā)送到服務(wù)器的數(shù)據(jù)格式標(biāo)準(zhǔn)化。但是，<input type="week">由于所有瀏覽器都無(wú)法保證瀏覽器的支持，因此存在一些問題。
我們將考慮基本的和更復(fù)雜的用途<input type="week">，然后就減輕瀏覽器支持問題提供建議（請(qǐng)參閱處理瀏覽器支持）。
week的基本用法
最簡(jiǎn)單的使用<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屬性
您應(yīng)該可以使用該step屬性來(lái)改變每增加一個(gè)星期的數(shù)量，但是它對(duì)支持瀏覽器似乎沒有任何影響。
驗(yàn)證
默認(rèn)情況下，<input type="week">不對(duì)輸入的值應(yīng)用任何驗(yàn)證。UI的實(shí)現(xiàn)通常不會(huì)讓你輸入任何不是一周/一年的東西 - 這是有幫助的 - 但是你仍然可以不填寫任何值然后提交，你可能想要限制可選周的范圍。
設(shè)置最大和最小周
您可以使用min和max屬性來(lái)限制用戶可以選擇的有效周數(shù)。在下面的例子中，我們?cè)O(shè)置最小值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屬性來(lái)根據(jù)當(dāng)前值是否有效來(lái)設(shè)置輸入的樣式。我們必須將圖標(biāo)放在<span>輸入旁邊，而不是輸入本身，因?yàn)樵贑hrome中生成的內(nèi)容放置在表單控件中，無(wú)法有效地進(jìn)行樣式化或顯示。
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;}結(jié)果是2017年W01和W52之間只有幾個(gè)星期將被視為有效，并可以在支持的瀏覽器中進(jìn)行選擇。
要求輸入星期值
此外，您可以使用該required屬性在本周強(qiáng)制填寫。因此，如果您嘗試提交空的星期字段，支持的瀏覽器將顯示錯(cuò)誤。
我們來(lái)看一個(gè)例子 - 在這里我們已經(jīng)設(shè)定了最小和最大星期，并且還要求這個(gè)字段：
<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>
如果您嘗試提交沒有值的表單，瀏覽器將顯示錯(cuò)誤?，F(xiàn)在嘗試玩這個(gè)例子：
這里是不使用支持瀏覽器的人的截圖：
重要說明：HTML表單驗(yàn)證 不能 取代服務(wù)器端腳本，以在被允許進(jìn)入數(shù)據(jù)庫(kù)之前確保輸入的數(shù)據(jù)格式正確。有人很容易調(diào)整HTML，使他們繞過驗(yàn)證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無(wú)法驗(yàn)證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯(cuò)誤等等）輸入到您的數(shù)據(jù)庫(kù)時(shí)，可能會(huì)導(dǎo)致災(zāi)難。
處理瀏覽器支持
如上所述，在編寫本文時(shí)使用周輸入的主要問題是瀏覽器支持 - Safari和Firefox不支持在桌面上，舊版本的IE不支持它。
移動(dòng)平臺(tái)（如Android和iOS）非常好地利用了這種輸入類型，提供了專業(yè)的UI控件，使得在觸摸屏環(huán)境中選擇值變得非常簡(jiǎn)單。例如，weekAndroid版Chrome 的選取器如下所示：
不支持的瀏覽器會(huì)優(yōu)雅地降級(jí)為 text input，但是這會(huì)在用戶界面的一致性（所呈現(xiàn)的控件將不同）和數(shù)據(jù)處理方面產(chǎn)生問題。
第二個(gè)問題是最嚴(yán)重的 - 就像我們之前提到的那樣，week輸入的實(shí)際值總是被格式化yyyy-Www。另一方面，通過文本輸入，瀏覽器默認(rèn)不知道日期的格式，人們可以使用多種方式寫周值，例如：
Week 1 2017
Jan 2-8 2017
2017-W01
etc.
目前以跨瀏覽器方式處理表單時(shí)間的最佳方法是讓用戶在單獨(dú)的控件中輸入小時(shí)數(shù)和分鐘數(shù)（如果需要，可以輸入秒數(shù)）（<select>元素正在流行 - 請(qǐng)參閱下面的實(shí)現(xiàn)），或使用JavaScript庫(kù)（如jQuery日期選擇器）和jQuery timepicker插件。
例子
在這個(gè)例子中，我們創(chuàng)建了兩組用于選擇周的UI元素 - 一個(gè)本地創(chuàng)建的選擇器<input type="week">，以及一組兩個(gè)<select>元素在舊版瀏覽器中選擇不支持本機(jī)輸入的周/年。
HTML看起來(lái)像這樣：
<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>
星期值是動(dòng)態(tài)生成的。
代碼的另一部分，可能會(huì)感興趣的是功能檢測(cè)代碼 - 檢測(cè)瀏覽器是否支持<input type="week">，我們創(chuàng)建一個(gè)新的<input>元素，將其設(shè)置type為week，然后立即檢查它type設(shè)置為 - 非支持的瀏覽器將返回text，因?yàn)樵?code>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); }}規(guī)范
規(guī)范 | 狀態(tài) | 注釋 |
|---|---|---|
HTML生活標(biāo)準(zhǔn)該規(guī)范中'<input type =“week”>''的定義。 | 生活水平 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 20 | 12 | No support1 | No support | 10.62 | No support |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | ? | (Yes) | (Yes) |