網頁前端日期時間選擇器，可以直接使用HTML原生的input type=”date”，但對於使用者體驗會較不佳，外觀也較簡單，今天我們使用Air Datepicker，輕量的套件(~13KB)，有精簡的外觀，搭配動畫展開日曆，客製化日期顯示，並且提供手機版RWD樣式，專案內有日期選擇的需求，非常建議使用Air Datepicker。
Air Datepicker官網(有範例可以操作)
Air Datepicker Git Hub(原始碼與程式碼使用說明)
Air Datepicker CDN(直接使用在快取雲端的CSS與JavaScript程式碼)
HTML原生Datepicker
HTML input提供了datepicker的型態，能夠直接在DOM上使用日期選擇。
圖示:
<input type="date">網頁前端日期時間選擇器-Air Datepicker
步驟說明(下方有英文語系使用說明)
- 引入套件CSS、Javascript
– CSS 放置於 <head></head>內
– JavaScript放置於</body>之前
- 加入HTML與JavaScript
– new AirDatepicker(‘#myDatepicker’)，呼叫套件方法
– 將功能套用在 id=”myDatepicker” 的 HTML input上面
- 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Air datepicker Css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css" rel="stylesheet">
</head>
<body>
<!-- Air datepicker Html element -->
<input id="myDatepicker">
<!-- Air datepicker JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.js"></script>
<script>
// Call Air datepicker function
new AirDatepicker('#myDatepicker');
</script>
</body>
</html>印出目前選擇時間
- 建立一個Button來觸發印出目前選擇時間的Function
- 使用Air datepicker提供的selectedDates方法來取得時間
- 打開Dev tool開發者視窗(F12)可以看到印出時間
- 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Air datepicker Css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css" rel="stylesheet">
</head>
<body>
<!-- Air datepicker Html element -->
<input id="myDatepicker">
<br><br>
<button onclick="printCurrentTime()">在Console印出目前時間</button>
<!-- Air datepicker JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.js"></script>
<script>
// Call Air datepicker function
const datepicker = new AirDatepicker('#myDatepicker');
// Print selected date
const printCurrentTime = () => {
console.log(datepicker.selectedDates)
}
</script>
</body>
</html>使用多國顯示(英文)
附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Air datepicker Css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.css" rel="stylesheet">
</head>
<body>
<!-- Air datepicker Html element -->
<input id="myDatepicker" data-language='en' >
<br>
<br>
<button onclick="printCurrentTime()">在Console印出目前時間</button>
<!-- Air datepicker JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.js"></script>
<script>
const en = {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
clear: 'Clear',
dateFormat: 'MM/dd/yyyy',
timeFormat: 'hh:mm aa',
firstDay: 0
}
const datepicker = new AirDatepicker('#myDatepicker',{
locale: en, // Set language
})
const printCurrentTime = () => {
console.log(datepicker.selectedDates) // print selected date
}
</script>
</body>
</html>
目前尚無提供語系的CDN連結所以先用這種方式更改語言
能在相對應的位置更改成中文
1. 宣告英文的內容
2. 將en放入locale便會讀取英文內容
只顯示月份選擇
const datepicker = new AirDatepicker('#myDatepicker',{
locale: en,
view: 'months',
minView: 'months',
dateFormat: 'MMMM yyyy'
})手機模式
顯示於螢幕正中央，也能直接在桌機或平板上使用，
我個人覺得非常棒，再附上選擇後自動關閉，UX體驗加分。
const datepicker = new AirDatepicker('#myDatepicker',{
locale: en,
isMobile: true,
autoClose: true,
})日期範圍選擇
選擇一個時間區間，對於安排住房或日期安排非常適合，
執行上面的列印日期 printCurrentTime，會顯示兩組日期。
const datepicker = new AirDatepicker('#myDatepicker',{
locale: en,
range: true,
multipleDatesSeparator: ' - '
})選擇時間時分
選擇特定時間分秒，以拉條的方式，
對於UI顯示跟UX的體驗都不錯。
const datepicker = new AirDatepicker('#myDatepicker',{
locale: en,
timepicker: true,
})選擇時間時分限制
只能選擇早上09-晚上18的時間範圍，
分鐘每次選擇的時間為5分鐘為一個單位
const datepicker = new AirDatepicker('#myDatepicker',{
locale: en,
timepicker: true,
minHours: 9,
maxHours: 18,
minutesStep: 5
})自定義按鈕事件
- 宣告一個buttons陣列存放按鈕
- content顯示按鈕名稱
- onClick點擊按鈕後觸發的事件dp則為該datepicker可以用來使用AirDatepicker有的功能
const datepicker = new AirDatepicker('#myDatepicker',{
locale: en,
buttons: [
{
content: "Print current time", // Button text
onClick(dp) { // click button will trigger function
let viewDate = dp.selectedDates;
console.log(viewDate)
}
}
]
})總結
Air datepicker官網還有提供更多的使用方式做參考，個人真的非常推這款網頁時間選擇套件，
等你親自使用過再去使用別的日期選擇套件，就會知道差異，Air datepicker提供了完善的功能與優良的介面，使用上也非常簡單易懂，大家可以留言給我，或是任何操作有疑問都可以讓我知道，我會盡量在一週內回覆你留言與透過email回覆給你，祝各位開發順利。