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 產生限制日期範圍,這裡有一個範例可以參考:
<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 的版本,同樣是將日期範圍限制在從現在算起的一週之內。
<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
,產生出來的效果為:
目前 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