<input type="week">
<input> 元素，當其 type 屬性設定為 week 時，會建立一個允許使用者方便地輸入年份和該年份的 ISO 8601 週數（即第 1 周至第 52 或 53 周）的輸入欄位。
試一試
<label for="camp-week">Choose a week in May or June:</label>
<input
type="week"
name="week"
id="camp-week"
min="2018-W18"
max="2018-W26"
required />
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
控制元件的使用者介面因瀏覽器而異；目前跨瀏覽器支援略有限，僅 Chrome/Opera 和 Microsoft Edge 支援。在不支援的瀏覽器中，該控制元件會優雅地降級，其功能與 <input type="text"> 相同。
值
一個字串，表示輸入框中輸入的周/年值。此輸入型別使用的日期和時間值的格式在 周字串 中進行了描述。
您可以透過在 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。
您還可以透過輸入元素的 value 屬性在 JavaScript 中獲取和設定該值，例如：
const weekControl = document.querySelector('input[type="week"]');
weekControl.value = "2017-W45";
附加屬性
除了 <input> 元素的通用屬性外，周輸入框還提供以下屬性。
max
可接受的最新（時間上）年份和週數，格式為上面 值 部分討論的字串格式。如果元素中輸入的 value 超過此值，則元素將 驗證約束 失敗。如果 max 屬性的值不是有效的周字串，則該元素沒有最大值。
此值必須大於或等於 min 屬性指定的年份和週數。
min
可接受的最早年份和週數。如果元素 value 小於此值，則元素將 驗證約束 失敗。如果為 min 指定了不是有效周字串的值，則輸入沒有最小值。
此值必須小於或等於 max 屬性的值。
readonly
一個布林屬性，如果存在，則表示該欄位不能由使用者編輯。但是，其 value 仍然可以透過 JavaScript 程式碼直接設定 HTMLInputElement value 屬性來更改。
注意： 由於只讀欄位不能有值，因此 required 對同時指定了 readonly 屬性的輸入沒有影響。
step
step 屬性是一個數字，指定值必須遵循的粒度，或者為特殊值 any（如下所述）。只有與步長基數相差整數步長的值才有效。步長基數是 min（如果已指定），否則為 value，或者為 −259,200,000（1970-W01 周的開始），如果兩者均未提供。
對於 week 輸入框，step 的值以周為單位，並被視為一個數值，等於 step 值乘以 604,800,000 毫秒（底層數值單位為毫秒）。預設值為 1，表示 1 周。
字串值 any 表示不隱含步長，允許任何值（排除其他約束，例如 min 和 max）。實際上，對於 week 輸入框，它的效果與 1 相同，因為選擇器 UI 只允許選擇整週。
注意：當用戶輸入的資料不符合步進配置時，使用者代理可能會四捨五入到最近的有效值，當有兩個同樣接近的選項時，優先選擇正方向的數字。
使用周輸入框
周輸入框乍一看似乎很方便，因為它們提供了方便的周選擇 UI，並且無論使用者瀏覽器或地區如何，都能將資料格式標準化以傳送到伺服器。然而，<input type="week"> 存在一些問題，因為並非所有瀏覽器都能保證支援。
我們將介紹 <input type="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>
控制輸入大小
使用 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 和 :invalid CSS 屬性來根據當前值是否有效來設定輸入框的樣式。我們不得不將圖示放在輸入框旁邊的 <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 控制元件，在觸控式螢幕環境中非常容易選擇值。例如，Android 版 Chrome 上的 week 選擇器如下所示：
不支援的瀏覽器會優雅地降級為文字輸入框，但這會在使用者介面一致性（呈現的控制元件不同）和資料處理方面帶來問題。
第二個問題更為嚴重。如前所述，對於 week 輸入框，實際值始終被標準化為 yyyy-Www 格式。當瀏覽器回退到通用文字輸入框時，沒有任何東西可以引導使用者正確格式化輸入（而且它肯定不直觀）。人們有多種方式可以書寫周值；例如：
第 1 周 20172017 年 1 月 2 日至 8 日2017-W01- etc.
目前，在表單中以跨瀏覽器相容的方式處理周/年的最佳方法是讓使用者在單獨的控制元件中輸入週數和年份（<select> 元素很受歡迎；請參見下面的示例），或者使用 JavaScript 庫，例如 jQuery date picker。
示例
在此示例中，我們為周選擇建立了兩組 UI 元素：一組是使用 <input type="week"> 建立的本機選擇器，另一組是用於在不支援 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>
周值由下面的 JavaScript 程式碼動態生成。
程式碼中可能還有其他感興趣的部分是功能檢測程式碼。為了檢測瀏覽器是否支援 <input type="week">，我們建立一個新的 <input> 元素，嘗試將其 type 設定為 week，然後立即檢查其 type 設定為何值。不支援的瀏覽器將返回 text，因為 week 型別會回退到 text 型別。如果 <input type="week"> 不受支援，我們將隱藏本機選擇器，而是顯示回退選擇器 UI（<select>）。
// Get UI elements
const nativePicker = document.querySelector(".nativeWeekPicker");
const fallbackPicker = document.querySelector(".fallbackWeekPicker");
const fallbackLabel = document.querySelector(".fallbackLabel");
const yearSelect = document.querySelector("#year");
const 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
const test = document.createElement("input");
try {
test.type = "week";
} catch (e) {
console.log(e.description);
}
// If it does, run the code inside the if () {} block
if (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 (let i = 1; i <= 52; i++) {
const option = document.createElement("option");
option.textContent = i < 10 ? `0${i}` : i;
weekSelect.appendChild(option);
}
}
注意： 請記住，有些年份有 53 周（請參閱 每年週數）！在開發生產應用程式時，您需要將此考慮在內。
技術摘要
| 值 | 一個表示周和年份的字串，或為空 |
| 事件 |
change 和 input |
| 支援的常見屬性 |
autocomplete, list, readonly, step |
| IDL 屬性 |
list, value, valueAsDate, valueAsNumber |
| DOM 介面 | HTMLInputElement |
| 方法 |
select()、stepDown() 和 stepUp() |
| 隱式 ARIA 角色 | 沒有對應的角色 |
規範
| 規範 |
|---|
| HTML # week-state-(type=week) |
瀏覽器相容性
載入中…