我們經(jīng)常會(huì)應(yīng)用到日期和時(shí)間選擇器，之前我們使用最多的是jQuery UI的datepicker()，那么今天我給大家介紹一款非常有趣的日期和時(shí)間選擇器，它分為日期選擇器datedropper以及時(shí)間選擇器timedropper，他們倆尤其適合在移動(dòng)端上應(yīng)用。
日期選擇器datedropper
使用非常簡(jiǎn)單，分三步，
１、引入相關(guān)js和css文件。注意datedropper和timedropper都是基于jQuery的插件，所以也要引入jQuery庫(kù)文件。
<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" />
３、調(diào)用datedropper
<script>
$("#pickdate").dateDropper();
</script>
然后，就是可以根據(jù)需要適當(dāng)配置一些選項(xiàng)。datedropper提供了如下基本選項(xiàng)設(shè)置：
animate：展示動(dòng)畫(huà)效果，當(dāng)設(shè)置為true時(shí)，選擇器面板中的日期會(huì)做動(dòng)畫(huà)滾動(dòng)到當(dāng)前日期，默認(rèn)是true。
init_animation：點(diǎn)擊彈出面板時(shí)的動(dòng)畫(huà)效果，有fadeIn(默認(rèn)), bounce, dropDown三種效果。
format：格式化日期，我已經(jīng)將默認(rèn)的格式改成了Y-m-d。
lang：語(yǔ)言，我已經(jīng)將插件默認(rèn)的月份和星期翻譯成中文語(yǔ)言了。
maxYear：最大年份，默認(rèn)當(dāng)前年份。
minYear：最小年份，默認(rèn)1970。
yearsRange：年份范圍，默認(rèn)10年。
dateDropper還提供了皮膚樣式的設(shè)置。
時(shí)間選擇器timedropper
和日期選擇器一樣，使用也簡(jiǎn)單。
１、引入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" />
３、調(diào)用timedropper
<script>
$("#picktime").timeDropper();
</script>
timeDropper提供了如下基本選項(xiàng)設(shè)置：
meridians：是否12小時(shí)制，默認(rèn)是12小時(shí)制，設(shè)置為false則為24小時(shí)制。
format：格式化，HH:mm如02:12。
init_animation：動(dòng)畫(huà)形式，fadeIn(默認(rèn)), dropDown。
setCurrentTime：自動(dòng)設(shè)置當(dāng)前時(shí)間。
timeDropper也提供了皮膚樣式的設(shè)置。
jQuery移動(dòng)端日期(datedropper)和時(shí)間(timedropper)選擇器的內(nèi)容就給大家介紹這么多，感興趣的朋友可以查看效果演示，下載源碼哦！