基於zepto的移動端日期和時間選擇控件

前段時間給大家分享過一個基於jQuery Mobile的移動端日期時間拾取器，大家反應其由於加載過大的插件導致影響調用速度。那么今天我把從網絡上搜集到的兩個適合移動端應用的日期和時間選擇插件分享給大家，它們是基於Zepto的，在移動端更具優越性。

查看演示  下載源碼

日期選擇控件mdater

頭部調用：

<link rel="stylesheet" href="zepto.mdater.css"> 
<script type="text/javascript" src="zepto.min.js"></script> 
<script type="text/javascript" src="zepto.mdater.js"></script> 

內容html代碼：

<input id="in" type="text" readonly="readonly" /> 

js代碼：

$('#in').mdater({ 
    minDate : new Date(2015, 10, 1); 
}); 

選項minDate表示最小日期，可以設置一個最小日期，則小於設定的日期會變成灰色不可選，這里注意使用Date()對象中的月份如10表示的是11月份。

日期時間選擇控件datetimer

mtimer和mdater是倆兄弟，可以選擇時間。有人就將兩者合並，叫做datetimer，就是可以同時選擇日期和時間。當然如果不需要選擇時間的話，最好用mdater就足夠了。

頭部調用：

<link rel="stylesheet" href="zepto.mdatetimer.css"> 
<script src="zepto.js"></script> 
<script src="zepto.mdatetimer.js"></script> 

內容html代碼：

<input type="text" id="picktime" value="" readonly="readonly"> 

js代碼：

$('#picktime').mdatetimer({ 
        mode : 2, //時間選擇器模式 
        format : 2, //時間格式化方式 
        years : [2000, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017], //年份數組 
        nowbtn : true //是否顯示現在按鈕 
});     

各選項設置說明：

mode : 1, //時間選擇器模式： 1 ：年月日，2 ：年月日時分（ 24 小時），3 ：年月日時分（ 12 小時），4 ：年月日時分秒。默認： 1

format : 2, //時間格式化方式： 1 ：2015 年 06月 10 日 17 時 30分 46 秒，2 ： 2015-05-10 17:30:46。默認： 2

years : [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017], // 年份數組

nowbtn : true, //是否顯示現在按鈕

onOk : null, //點擊確定時添加額外的執行函數 默認null

onCancel : null, //點擊取消時添加額外的執行函數 默認null

聲明：本文為原創文章，helloweba.com和作者擁有版權，如需轉載，請注明來源於 helloweba.com並保留原文鏈接：http://www.helloweba.com/view-blog-349.html