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