有趣的日期和時間選擇器
我們經常會應用到日期和時間選擇器，之前我們使用最多的是jQuery UI的datepicker()，那么今天我給大家介紹一款非常有趣的日期和時間選擇器，它分為日期選擇器datedropper以及時間選擇器timedropper，他們倆尤其適合在移動端上應用。
日期選擇器datedropper
使用非常簡單，分三步，１、引入相關js和css文件。注意datedropper和timedropper都是基于jQuery的插件，所以也要引入jQuery庫文件。
<script src="jquery.js"></script>
<script src="datedropper.js"></script>
<link rel="stylesheet" type="text/css" href="datedropper.css">
２、布置body中的html。
<input type="text" id="pickdate" />
３、調用datedropper
<script>
$("#pickdate").dateDropper();
</script>
然后，就是可以根據需要適當配置一些選項。datedropper提供了如下基本選項設置：
animate：展示動畫效果，當設置為true時，選擇器面板中的日期會做動畫滾動到當前日期，默認是true。
init_animation：點擊彈出面板時的動畫效果，有fadeIn(默認), bounce, dropDown三種效果。
format：格式化日期，我已經將默認的格式改成了Y-m-d。
lang：語言，我已經將插件默認的月份和星期翻譯成中文語言了。
maxYear：最大年份，默認當前年份。
minYear：最小年份，默認1970。
yearsRange：年份范圍，默認10年。
dateDropper還提供了皮膚樣式的設置。
時間選擇器timedropper
和日期選擇器一樣，使用也簡單。１、引入js和css文件。
<script src="jquery.js"></script>
<script src="timedropper.js"></script>
<link rel="stylesheet" type="text/css" href="timedropper.css">
２、布置body中的html。
<input type="text" id="picktime" />
３、調用timedropper
<script>
$("#picktime").timeDropper();
</script>
timeDropper提供了如下基本選項設置：
meridians：是否12小時制，默認是12小時制，設置為false則為24小時制。
format：格式化，HH:mm如02:12。
init_animation：動畫形式，fadeIn(默認), dropDown。
setCurrentTime：自動設置當前時間。
timeDropper也提供了皮膚樣式的設置。
更多詳情可以訪問項目官網： http://felicegattuso.com/projects/datedropper/