在移動端進行日期選擇想必困擾過不少小伙伴，在PC端我們比較豐富的選擇，如jQueryUI的datepicker，但這些插件都比較臃腫，而且還要依賴一個同樣臃腫的庫。或許PC上可以忍受比較大的文件，網速相對快嘛。然而在移動端也面臨同樣的問題，想用一個日期選擇器還得依賴一個龐大的UI庫，如mobiscroll。但移動端的網速慢啊，而且要耗流量，用這么一個大家伙就顯得無法忍受。
於是，我決定造輪子了。造一個輕量級的、適合在移動端使用的日期選擇器。而且只依賴Zepto。（Zepto本身體積小，而且在移動端的使用很普遍了）
關於日期選擇器的設計，我的想法是能多簡單就多簡單，沒必要設計很多功能。畢竟是在移動端，而且只完成一件事：日期選擇。如果光在日期選擇上都需要用戶有很多操作，那說明產品設計的有問題了。另外在操作方式上，移動端更適合滑動的方式來選擇，而不是像PC上那樣，搞很多小方格來點選。
但需求總是多樣化的，為了滿足簡單的時間選擇和復雜的日期選擇，我直接寫了兩套，不同的場景使用各自合適的。下面分別介紹一下：
選擇具體時間的mtimer
先上圖：
功能介紹：
mtimer用來選擇某一天的具體時間點，需要了解的主要有以下幾點：
* 用於選擇一個粗略的時間點
* 時間范圍可配置
* 通過滑動操作來選擇，左右兩側可獨立滑動
* 時刻跨度暫設計為半小時
* 樣式在獨立的css文件中，可自己定制
技術細節：
* 依賴Zepto1.1.3核心模塊
* 滑動操作用了isroll來實現的，自己懶得實現了，代碼一並放進了zepto.mtimer.js，使用時無需再次引入iscroll.js
* 點擊操作用了github上別人已經封裝好的tap事件，沒用zepto的
使用方法：
像使用其他Zepto插件那樣使用：
1. 在頁面引入相關文件：
<link rel="stylesheet" href="zepto.mtimer.css"> <script src="zepto.js"></script> <script src="zepto.mtimer.js"></script>
2. 頁面上需要有一個input元素：
<input type="text" id="picktime" value="03-27 15:00" readonly>
3. 初始化插件：
$('#picktime').mtimer();
配置參數：
dateStart : new Date(), //開始日期 dateNum : 10, //天數 timeStart : 9, //開始時刻 timeNum : 12, //小時數 onOk : null, //點擊確定的回調函數 onCancel : null, //點擊取消的回調函數
基本東西就這么多啦，看一下在線的demo吧：點擊這里 記得用chrome模擬移動設備來看哦~或者直接手機掃描下面的二維碼：
選擇年月日的mdater
如果業務需要選擇更大范圍的年月日，那就使用mtimer他表哥mdater吧，先上截圖：
干凈清爽有木有，為了最大程度保證輕量級，做到了極簡DOM，沒有那么多的標簽嵌套，沒有一個多余的標簽。盡管我不喜歡在移動設備上進行點選操作，但既然業務有需求，只能搞成這樣的方格了。用法就不介紹了，用過datepicker都知道。
技術細節：
* 依賴Zepto1.1.3核心模塊
* 點擊操作用了github上別人已經封裝好的tap事件，沒用zepto的，點擊穿透、點擊延遲等問題不必再關注。
使用方法：參照上面mtimer
配置參數：
maxDate : null, //最大日期 minDate : new Date(1970, 0, 1) //最小日期
好吧有點偷懶了~只有兩個比較重要的配置，其他的暫時不考慮增加，等以后有需要了再升級吧。
簡單介紹到此，下面來看下mdater的在線demo：點擊這里。同樣，請使用chrome模擬移動設備來體驗最佳效果。你有手機？直接掃描下面的二維碼：
源碼下載地址
內附demo自行查看
mtimer : http://files.cnblogs.com/files/lvdabao/mtimer.zip
mdater : http://files.cnblogs.com/files/lvdabao/mdater.zip
隨便聲明一下
以上所有代碼遵從xxoo協議：
1. 你可隨意使用，隨意修改，你可以選擇給我打賞，也可以選擇悄悄拿走
2. 你如果給我打賞了，本人提供陪聊、陪解決問題、陪個性化定制等服務
來吧騷年，你都掃好幾下了，何不再多掃一下：
沒錯，你沒看錯，收款人不是我！是俺女朋友，“我在博客的打賞位置掛了你的支付寶”，很浪漫有木有~