jQuery移動端日期(datedropper)和時間(timedropper)選取器附源碼下載，jquerydatedropper

jQuery移動端日期(datedropper)和時間(timedropper)選取器附源碼下載，jquerydatedropper

我們經常會應用到日期和時間選取器，之前我們使用最多的是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)選取器的內容就給大家介紹這麼多，感興趣的朋友可以查看效果示範，下載源碼哦！