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