<input>元素創(chuàng)建date輸入字段，允許輕松輸入日期 - 這包括年，月和日，但不包括time。

控件的用戶界面從瀏覽器到瀏覽器都有所不同，目前支持是不完整的，請(qǐng)參閱瀏覽器兼容性以獲取更多詳細(xì)信息。在不受支持的瀏覽器中，控件會(huì)優(yōu)雅地降級(jí)為簡(jiǎn)單<input type="text">.

<input id="date" type="date">

對(duì)于那些不使用支持瀏覽器的用戶，Chrome / Opera日期控件看起來(lái)像這樣：

和邊緣日期控件看起來(lái)像這樣：

值

A DOMString表示輸入到輸入中的日期的值。您可以通過(guò)在value屬性中包含日期來(lái)為輸入設(shè)置默認(rèn)值，如下所示：

<input id="date" type="date" value="2017-06-01">

有一件事要注意的是，顯示的日期格式與實(shí)際不同value- 所顯示的日期格式將根據(jù)用戶瀏覽器的設(shè)置區(qū)域選擇，而日期value總是格式化的yyyy-mm-dd。

您還可以使用該HTMLInputElement.value屬性在JavaScript中獲取和設(shè)置日期值，例如：

var dateControl = document.querySelector('input[type="date"]');dateControl.value = '2017-06-01';

使用日期輸入

日期輸入乍看起來(lái)很方便 - 它們?yōu)檫x擇日期提供了一個(gè)簡(jiǎn)單的用戶界面，并且將發(fā)送到服務(wù)器的數(shù)據(jù)格式標(biāo)準(zhǔn)化，而不管用戶的區(qū)域設(shè)置如何。但是，<input type="date">由于瀏覽器支持有限，因此存在問(wèn)題。

我們將考慮基本的和更復(fù)雜的用途<input type="date">，然后就減輕瀏覽器支持問(wèn)題提供建議（請(qǐng)參閱處理瀏覽器支持）。

日期的基本用法

最簡(jiǎn)單的使用<input type="date">涉及基本<input>和<label>元素組合，如下所示：

<form>  <div>    <label for="bday">Enter your birthday:</label>    <input type="date" id="bday" name="bday">  </div></form>

設(shè)置最大和最小日期

您可以使用min和max屬性來(lái)限制用戶可以選擇的日期。在下面的例子中，我們將最小日期2017-04-01和最大日期設(shè)置為2017-04-30：

<form>  <div>    <label for="party">Choose your preferred party date:</label>    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30">  </div></form>

這里的結(jié)果是, 只有在4月的天數(shù)可以選擇-只有 "天" 部分的文本值將是可編輯的, 和日期以外的4月不能滾動(dòng)到 datepicker 小部件。

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

控制輸入大小

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

驗(yàn)證

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

如果您使用min和max限制可用日期（請(qǐng)參閱anch（“設(shè)置最大值和最小值日期”）），如果您嘗試提交超出設(shè)定范圍的日期，支持的瀏覽器將顯示錯(cuò)誤。

此外, 您還可以使用required屬性來(lái)強(qiáng)制填寫(xiě)日期, 如果您嘗試提交空日期字段, 則會(huì)顯示錯(cuò)誤。

讓我們看一個(gè)例子-在這里, 我們已經(jīng)設(shè)置了最小和最大的日期:

<form>  <div>    <label for="party">Choose your preferred party date (required, April 1st to 20th):</label>    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required>    <span class="validity"></span>  </div>  <div>    <input type="submit">  </div></form>

如果您嘗試提交的表單的日期不完整 (或在設(shè)置邊界之外的日期), 瀏覽器將顯示一個(gè)錯(cuò)誤?，F(xiàn)在嘗試使用該示例:

下面是那些不使用支持瀏覽器的用戶的截圖:

這是上面例子中使用的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;
    display: flex;
    align-items: center;}label {
  display: inline-block;
  width: 300px;}input:invalid+span:after {
    content: '?';
    padding-left: 5px;}input:valid+span:after {
    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ù)，當(dāng)格式不正確的數(shù)據(jù)被提交（或數(shù)據(jù)太大，類型錯(cuò)誤等等）時(shí)，可能會(huì)發(fā)生災(zāi)難。

處理瀏覽器支持

如上所述，在撰寫(xiě)本文時(shí)使用日期輸入的主要問(wèn)題是瀏覽器支持。舉個(gè)例子，Android版Firefox的日期選擇器如下所示：

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

第二個(gè)問(wèn)題是最嚴(yán)重的 - 正如我們前面提到的，有一個(gè)日期輸入，實(shí)際值總是標(biāo)準(zhǔn)化為格式yyyy-mm-dd。另一方面，在輸入文本的情況下，瀏覽器默認(rèn)不知道日期的格式，人們寫(xiě)日期的方式很多，例如：

• ddmmyyyy

• dd/mm/yyyy

• mm/dd/yyyy

• dd-mm-yyyy

• mm-dd-yyyy

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

<form>  <div>    <label for="bday">Enter your birthday:</label>    <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">    <span class="validity"></span>  </div>  <div>    <input type="submit">  </div></form>

如果您嘗試提交，則會(huì)看到瀏覽器現(xiàn)在顯示一條錯(cuò)誤消息（并將輸入高亮顯示為無(wú)效），如果輸入與模式不匹配nnnn-nn-nn，其中n是從0到9的數(shù)字。當(dāng)然，這不會(huì)不要阻止人們輸入無(wú)效的日期，或者錯(cuò)誤地格式化日期，例如yyyy-dd-mm（而我們想要yyyy-mm-dd）。所以我們?nèi)匀挥幸粋€(gè)問(wèn)題。

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

例子

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

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

<form>    <div class="nativeDatePicker">      <label for="bday">Enter your birthday:</label>      <input type="date" id="bday" name="bday">      <span class="validity"></span>    </div>    <p class="fallbackLabel">Enter your birthday:</p>    <div class="fallbackDatePicker">      <span>        <label for="day">Day:</label>        <select id="day" name="day">        </select>      </span>      <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></form>

月份是硬編碼的（因?yàn)樗鼈兛偸窍嗤模?，而日和年的值是根?jù)當(dāng)前選擇的月份和年份以及當(dāng)年動(dòng)態(tài)生成的（請(qǐng)參閱下面的代碼注釋，了解這些函數(shù)的工作原理的詳細(xì)說(shuō)明。 ）

該代碼可能會(huì)感興趣的另一部分是特征檢測(cè)碼-來(lái)檢測(cè)瀏覽器是否支持<input type="date">，我們創(chuàng)建了一個(gè)新的<input>元素，設(shè)置其type到date，然后立即檢查什么的類型設(shè)置為-不支持的瀏覽器將返回text，因?yàn)檫@個(gè)date類型會(huì)回到類型text。如果<input type="date">不支持，我們隱藏本地選擇器并顯示后備選取器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');var daySelect = document.querySelector('#day');// 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 = 'date';// 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 days and years dynamically  // (the months are always the same, therefore hardcoded)  populateDays(monthSelect.value);  populateYears();}function populateDays(month) {  // delete the current set of <option> elements out of the  // day <select>, ready for the next set to be injected  while(daySelect.firstChild){
    daySelect.removeChild(daySelect.firstChild);  }  // Create variable to hold new number of days to inject  var dayNum;  // 31 or 30 days?  if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') {
    dayNum = 31;  } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') {
    dayNum = 30;  } else {  // If month is February, calculate whether it is a leap year or not    var year = yearSelect.value;    (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28;  }  // inject the right number of new <option> elements into the day <select>  for(i = 1; i <= dayNum; i++) {    var option = document.createElement('option');
    option.textContent = i;
    daySelect.appendChild(option);  }  // if previous day has already been set, set daySelect's value  // to that day, to avoid the day jumping back to 1 when you  // change the year  if(previousDay) {
    daySelect.value = previousDay;    // If the previous day was set to a high number, say 31, and then    // you chose a month with less total days in it (e.g. February),    // this part of the code ensures that the highest day available    // is selected, rather than showing a blank daySelect    if(daySelect.value === "") {
      daySelect.value = previousDay - 1;    }    if(daySelect.value === "") {
      daySelect.value = previousDay - 2;    }    if(daySelect.value === "") {
      daySelect.value = previousDay - 3;    }  }}function populateYears() {  // get this 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);  }}// when the month or year <select> values are changed, rerun populateDays()// in case the change affected the number of available daysyearSelect.onchange = function() {  populateDays(monthSelect.value);}monthSelect.onchange = function() {  populateDays(monthSelect.value);}//preserve day selectionvar previousDay;// update what day has been set to previously// see end of populateDays() for usagedaySelect.onchange = function() {
  previousDay = daySelect.value;}

規(guī)范

瀏覽器兼容性