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

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

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

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

Edge的 month 看起來像這樣:

值

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

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

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

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

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

使用月份輸入

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

我們在往下看更多關(guān)于<input type="month">基礎(chǔ)和更多的高級的用法

month的基本用途

最簡單的<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è)置最長和最短日期

你可以使用min 和 max 屬性 來限制用戶選擇日期. 在下列的例子中我們設(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年一月可以選擇 — 在這個控件里這個范圍以外的月份不能滾動選擇。

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

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

控制輸入大小

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

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

驗證

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

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

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

<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è)定范圍外的日期），則瀏覽器顯示錯誤?，F(xiàn)在嘗試玩這個例子：

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

這是上面例子中使用的CSS。這里我們利用:valid和:invalidCSS屬性來根據(jù)當前值是否有效來設(shè)置輸入的樣式。我們必須將圖標放在<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;}

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

處理瀏覽器支持

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

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

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

• mmyyyy

• mm/yyyy

• mm-yyyy

• yyyy-mm

• etc.

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

<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>

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

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

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

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

例子

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

HTML看起來像這樣：

<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>

月份是硬編碼的（因為它們總是相同的），而年份值是根據(jù)當年動態(tài)生成的（請參閱下面的代碼注釋，了解這些功能的詳細解釋）。

該代碼可能會感興趣的另一部分是特征檢測碼-來檢測瀏覽器是否支持<input type="month">，我們創(chuàng)建了一個新的<input>元素，設(shè)置其type到month，然后立即檢查什么的類型設(shè)置為-不支持的瀏覽器將返回text，因為這個date類型會回到類型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ī)范

瀏覽器兼容性