HTML5 的日期輸入功能教學

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


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

基本用法

基本的 HTML5 日期輸入功能用法就像這樣:
<label for="bookdate">日期:</label>
<input type="date" id="bookdate" placeholder="2014-09-18">
產生出來的效果為:
由於這個功能是 HTML5 最新的標準,一些比較舊的瀏覽器可能不支援,若遇到不支援的狀況,瀏覽器就會以一般的文字欄位來顯示,讓使用者使用鍵盤輸入,而這裡的 placeholder 就是用來提供使用者一個標準的格式,讓使用者依照這樣的格式輸入。

限制日期範圍

如果要限制使用者可以選擇的日期範圍,可以加上 minmax 兩個參數:
<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
本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站