類型為 month 的 <input> 可以讓你容易地創(chuàng)建一個(gè)方便輸入年份或月份的一個(gè) <input>。

這個(gè)控件在各個(gè)瀏覽器支持都不同，目前是支持部分瀏覽器。在桌面上支持情況為 Chrome/Opera 和 Edge 。在移動(dòng)端支持大部分現(xiàn)代瀏覽器。在其他瀏覽器中，這個(gè)控件會(huì)被優(yōu)雅的降級(jí)到<input type="text">.

<input id="month" type="month">

對(duì)于那些使用不支持的瀏覽器，Chrome / Opera月份控制如下圖所示。單擊右側(cè)的向下箭頭會(huì)顯示日期選擇器，以便您選擇日期;你必須手動(dòng)輸入時(shí)間。

Edge的 month 看起來(lái)像這樣:

值

DOMString表示輸入輸入的月份和年份的值。你可以設(shè)置一個(gè)默認(rèn)的屬性值插入到 value里, 像這樣:

<label for="bday-month">What month were you both in?</label><input id="bday-month" type="month" name="bday-month" value="2017-06">

需要注意的是顯示的如期格式不同于實(shí)際的value — 日期顯示的格式將根據(jù)用戶的操作系統(tǒng)的時(shí)區(qū)設(shè)置, 而時(shí)間的格式通常會(huì)格式化為  yyyy-MM. 在向服務(wù)器提交上述值的時(shí)候他們看起來(lái)像這樣：bday-month=1978-06.

你也可以使用JavaScript HTMLInputElement.value 設(shè)置日期值 。

var monthControl = document.querySelector('input[type="month"]');monthControl.value = '1978-06';

使用月份輸入

與日期相關(guān)的輸入乍一看很方便，它們提供了一個(gè)簡(jiǎn)單的用戶界面來(lái)選擇日期，并且它們將發(fā)送到服務(wù)器的數(shù)據(jù)格式規(guī)范化，而不考慮用戶的本地環(huán)境。但是, 由于瀏覽器支持有限，所以這個(gè) <input type="month">還是存在兼容性問(wèn)題。

我們?cè)谕驴锤嚓P(guān)于<input type="month">基礎(chǔ)和更多的高級(jí)的用法

month的基本用途

最簡(jiǎn)單的<input type="month"> 涉及到基礎(chǔ)的 <input> 和 <label> 的元素組合, 像下面這樣:

<form>  <label for="bday-month">What month were you both in?</label>  <input id="bday-month" type="month" name="bday-month"></form>

設(shè)置最長(zhǎng)和最短日期

你可以使用min 和 max 屬性 來(lái)限制用戶選擇日期. 在下列的例子中我們?cè)O(shè)置最小月份1900-01 最大月份到 2017-08:

<form>  <label for="bday-month">What month were you both in?</label>  <input id="bday-month" type="month" name="bday-month"
         min="1900-01" max="2017-08"></form>

結(jié)果是這樣:

• 月份只有在2017年八月份到1900年一月可以選擇 — 在這個(gè)控件里這個(gè)范圍以外的月份不能滾動(dòng)選擇。

• 根據(jù)您使用的瀏覽器，您可能會(huì)發(fā)現(xiàn)超出指定值的時(shí)間可能無(wú)法在時(shí)間選擇器（例如“邊緣”）中選擇，或者無(wú)效，但仍可用（例如Chrome）。

注意：您應(yīng)該能夠使用該step屬性來(lái)改變每次增加日期時(shí)跳過(guò)的天數(shù)（例如，也許您只希望使周六可選）。但是，在編寫本文的任何實(shí)施過(guò)程中，這似乎并不奏效。

控制輸入大小

<input type="month">不支持表單大小屬性，如size。你將不得不求助于CSS的大小需求。

<input type="month">不支持表單大小屬性，如size。你將不得不求助于CSS的大小需求。

驗(yàn)證

默認(rèn)情況下，<input type="month">不對(duì)輸入的值應(yīng)用任何驗(yàn)證。UI實(shí)現(xiàn)通常不會(huì)讓你輸入任何不是日期的東西 - 這很有幫助 - 但是你仍然可以不填寫日期并提交，或者輸入無(wú)效的日期（例如4月32日）。

您可以使用min并max限制可用的日期（請(qǐng)參閱anch（“設(shè)置最大值和最小值日期”）），并使用該required屬性在日期中強(qiáng)制填入。因此，如果您嘗試提交超出設(shè)定范圍的日期或空的日期字段，支持的瀏覽器將顯示錯(cuò)誤。

我們來(lái)看一個(gè)例子 - 在這里我們已經(jīng)設(shè)置了最小和最大日期，并且還需要這個(gè)字段：

<form>  <div>    <label for="month">What Month would you like to visit us? (Summer months only.)</label>    <input id="month" type="month" name="month"
           min="2017-06" max="2017-09" required>    <span class="validity"></span>  </div>  <div>      <input type="submit" value="Submit form">  </div></form>

如果您嘗試使用不完整的日期提交表單（或使用設(shè)定范圍外的日期），則瀏覽器顯示錯(cuò)誤?，F(xiàn)在嘗試玩這個(gè)例子：

這里是您不使用支持瀏覽器的人的截圖：

這是上面例子中使用的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;}

重要提示：HTML表單驗(yàn)證是不為腳本，確保輸入的數(shù)據(jù)是正確的格式的替代品。有人很容易調(diào)整HTML，使他們繞過(guò)驗(yàn)證，或完全刪除它。也有人可能完全繞過(guò)你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無(wú)法驗(yàn)證其接收到的數(shù)據(jù)，那么在提交格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯(cuò)誤等）時(shí)，可能會(huì)導(dǎo)致災(zāi)難。

處理瀏覽器支持

如上所述，在編寫本文時(shí)使用日期輸入的主要問(wèn)題是瀏覽器支持 - 只有Chrome / Opera和Edge支持它在桌面上，以及大多數(shù)現(xiàn)代瀏覽器在手機(jī)上。舉個(gè)例子，monthAndroid版Chrome瀏覽器中的選擇器如下所示：

不支持的瀏覽器會(huì)優(yōu)雅地降級(jí)為文本輸入，但這會(huì)在用戶界面的一致性（所呈現(xiàn)的控件將不同）和數(shù)據(jù)處理方面造成問(wèn)題。

第二個(gè)問(wèn)題是最嚴(yán)重的 - 就像我們之前提到的那樣，month輸入的實(shí)際值總是被格式化yyyy-mm。另一方面，通過(guò)文本輸入，瀏覽器默認(rèn)不知道日期的格式，人們可以通過(guò)多種方式寫日期，例如：

• mmyyyy

• mm/yyyy

• mm-yyyy

• yyyy-mm

• etc.

解決這個(gè)問(wèn)題的一個(gè)方法就是pattern在month輸入中添加一個(gè)屬性。即使month輸入不使用它，文本輸入后備將會(huì)。例如，請(qǐng)嘗試在非支持的瀏覽器中查看以下演示：

<form>  <div>    <label for="month">What Month would you like to visit us? (Summer months only, yyyy-mm)</label>    <input id="month" type="month" name="month"
           min="2017-06" max="2017-09" required
           pattern="[0-9]{4}-[0-9]{2}">    <span class="validity"></span>  </div>  <div>      <input type="submit" value="Submit form">  </div></form>

如果你嘗試提交它，你會(huì)看到，現(xiàn)在瀏覽器顯示錯(cuò)誤信息（并突出了輸入為無(wú)效）如果您的條目不匹配的模式nnnn-nn，在那里n是一個(gè)數(shù)字從0到9。當(dāng)然，這并未不要阻止人們輸入無(wú)效日期，或者按照模式錯(cuò)誤地格式化日期。

哪個(gè)用戶將要了解他們需要輸入日期的模式？

我們?nèi)匀挥幸粋€(gè)問(wèn)題。

目前以跨瀏覽器方式處理表單中日期的最好方法是讓用戶在單獨(dú)的控件中輸入月份和年份（<select>元素正在流行 - 請(qǐng)參閱下面的實(shí)現(xiàn)），或使用JavaScript庫(kù)（如jQuery日期選擇器，和jQuery timepicker插件。

例子

在這個(gè)例子中，我們創(chuàng)建了兩組用于選擇日期的UI元素 - 一個(gè)由本地創(chuàng)建的選擇器<input type="month">，以及一組兩個(gè)<select>元素，用于在不支持本機(jī)輸入的舊版瀏覽器中選擇幾個(gè)月/年。

HTML看起來(lái)像這樣：

<form>  <div class="nativeDatePicker">    <label for="month-visit">What Month would you like to visit us?</label>    <input type="month" id="month-visit" name="month-visit">    <span class="validity"></span>  </div>  <p class="fallbackLabel">What Month would you like to visit us?</p>  <div class="fallbackDatePicker">    <div>      <span>        <label for="month">Month:</label>        <select id="month" name="month">          <option selected>January</option>          <option>February</option>          <option>March</option>          <option>April</option>          <option>May</option>          <option>June</option>          <option>July</option>          <option>August</option>          <option>September</option>          <option>October</option>          <option>November</option>          <option>December</option>        </select>      </span>      <span>        <label for="year">Year:</label>        <select id="year" name="year">        </select>      </span>    </div>  </div></form>

月份是硬編碼的（因?yàn)樗鼈兛偸窍嗤模?，而年份值是根?jù)當(dāng)年動(dòng)態(tài)生成的（請(qǐng)參閱下面的代碼注釋，了解這些功能的詳細(xì)解釋）。

該代碼可能會(huì)感興趣的另一部分是特征檢測(cè)碼-來(lái)檢測(cè)瀏覽器是否支持<input type="month">，我們創(chuàng)建了一個(gè)新的<input>元素，設(shè)置其type到month，然后立即檢查什么的類型設(shè)置為-不支持的瀏覽器將返回text，因?yàn)檫@個(gè)date類型會(huì)回到類型text。如果<input type="month">不支持，我們隱藏本地選擇器并顯示后備選取器UI（<select>）。

// define variablesvar nativePicker = document.querySelector('.nativeDatePicker');var fallbackPicker = document.querySelector('.fallbackDatePicker');var fallbackLabel = document.querySelector('.fallbackLabel');var yearSelect = document.querySelector('#year');var monthSelect = document.querySelector('#month');// hide fallback initiallyfallbackPicker.style.display = 'none';fallbackLabel.style.display = 'none';// test whether a new date input falls back to a text input or notvar test = document.createElement('input');test.type = 'month';// 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 years dynamically  // (the months are always the same, therefore hardcoded)  populateYears();}function populateYears() {  // get the current year as a number  var date = new Date();  var year = date.getFullYear();  // Make this year, and the 100 years before it available in the year <select>  for(var i = 0; i <= 100; i++) {    var option = document.createElement('option');
    option.textContent = year-i;
    yearSelect.appendChild(option);  }}

規(guī)范

瀏覽器兼容性