jQuery行動端日期(datedropper)和時間(timedropper)選擇器附原始碼下載_jquery

我們常常會套用到日期和時間選擇器，之前我們使用最多的是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也提供了皮膚樣式的設定。

jQuery行動裝置日期(datedropper)和時間(timedropper)選擇器的內容就給大家介紹這麼多，有興趣的朋友可以查看效果演示，下載源碼哦！