HTML5 的日期輸入功能教學

HTML5 中提供了一項新的日期輸入功能，可以提供使用者一個很方便選擇日期的介面，開發者也可以不必再依靠 jQuery 等 JavaScript 來實作這樣的功能。

在網頁中若要讓使用者輸入日期，傳統上的做法都是使用 jQuery 或是類似的 JavaScript 工具，另外寫一個日期選擇功能，而現在 HTML5 提供了一項原生的日期輸入功能，讓開發者可以不用再使用額外的工具就可以達到同樣的功能。

基本用法

基本的 HTML5 日期輸入功能用法就像這樣：

<label for="bookdate">日期：</label>
<input type="date" id="bookdate" placeholder="2014-09-18">

產生出來的效果為：

日期：

由於這個功能是 HTML5 最新的標準，一些比較舊的瀏覽器可能不支援，若遇到不支援的狀況，瀏覽器就會以一般的文字欄位來顯示，讓使用者使用鍵盤輸入，而這裡的 placeholder 就是用來提供使用者一個標準的格式，讓使用者依照這樣的格式輸入。

限制日期範圍

如果要限制使用者可以選擇的日期範圍，可以加上 min 與 max 兩個參數：

<input type="date" id="bookdate" value="2014-09-09" min="2014-09-09" max="2014-09-18">

產生出來的效果為：

日期：

使用 PHP 限制日期範圍

如果需要使用 PHP 產生限制日期範圍，這裡有一個範例可以參考：

<input type="date" id="bookdate" min="<?=date('Y-m-d')>" value="<?=date('Y-m-d')>" max="<?=date('Y-m-d', strtotime("+7 day", time()))>" value="<?=date('Y-m-d')>" >

這裡是使用 PHP 將日期範圍限制在從現在算起的一週之內。

使用 JavaScript 限制日期範圍

這是 JavaScript 的版本，同樣是將日期範圍限制在從現在算起的一週之內。

<script>
function convertToISO(timebit) {
  // remove GMT offset
  timebit.setHours(0, -timebit.getTimezoneOffset(), 0, 0);
  // format convert and take first 10 characters of result
  var isodate = timebit.toISOString().slice(0,10);
  return isodate;
}

var bookdate = document.getElementById('bookdate');
var currentdate = new Date();
bookdate.min = convertToISO(currentdate);
bookdate.placeholder = bookdate.min;
var futuredate = new Date();
// go forward 7 days into the future
futuredate.setDate(futuredate.getDate() + 7);
bookdate.max = convertToISO(futuredate);
</script>

進階日期選擇規則

step 參數可以指定選擇日期時，間隔的天數，如果 step 指定為 7 就代表只能選擇每一週中的某一天。

<datalist> 可以用來列出可以選擇的列表，讓使用者更方便選擇：

<label for="vacations">選擇節日：</label>
<input type="date" list="vacation-days" id="vacations">
<datalist id="vacation-days">
<option label="Thanksgiving">2014-10-13</option>
<option label="Remembrance Day">2014-11-11</option>
<option label="Christmas Day">2014-12-25</option>
<option label="Boxing Day">2014-12-26</option>
</datalist>

可用的選項使用 <option> 來指定，而在原本的 <input> 中要再加入 list 來指定 <datalist> 的 id，產生出來的效果為：

選擇節日：

使用 JavaScript 篩選日期

目前 HTML5 所提供的日期篩選功能還不是很完備，如果需要比較複雜的篩選規則，可以使用 JavaScript 來判斷。例如限制不可以選擇週日：

<label for='massage'>選擇日期（週日除外）：</label>
<input type="date" id="massage">

加上 JavaScript 來篩選選擇的日期：

<script>
var date = document.getElementById('massage'),
function noSundays(e){
  // Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday
  var day = new Date(e.target.value).getUTCDay();
  if ( day == 0 ){
    e.target.setCustomValidity('不可選擇週日！');
  } else {
    e.target.setCustomValidity('');
  }
}
date.addEventListener('input',noSundays);
</script>

最後，加上 CSS 設定選擇錯誤時的樣式：

<style>
input:invalid {
  background-color: #E00;
}
</style>

產生出來的效果為：

選擇日期（週日除外）：

這樣當使用者選擇到週日的時候，欄位就會變成我們指定的紅色。

參考資料：demosthenes.info