基於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