輕量級移動端日期選擇器

 

　　在移動端進行日期選擇想必困擾過很多小夥伴，在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