HTML5 input date屬性引起的探索——DatePicker（日期選擇外掛程式）

標籤：結束   sub   oca   測試   開始時間   mon   pre   class   擷取   

不得不說H5的input date屬性真的好用，之前我寫的http://www.cnblogs.com/tu-0718/p/6729274.html 這篇部落格裡面也有提到，不過雖然移動端對H5的支援還是很好的，但是PC端瀏覽器對H5的支援就很讓人無奈了。然後最近遇到一個需求：需要一個開始時間和結束時間，預設顯示年月，如：

 

第一反應想到的是H5的input date屬性，因為相容性問題無奈放棄，然後發現了一個挺好用的外掛程式：DatePicker，

註：在使用此外掛程式時需要注意，DatePicker外掛程式需要的不僅僅是js檔案，而是整個檔案夾都需要，如：

  如果你把裡面的js檔案單獨提出來引入的話是沒有效果的，控制台會提示找不到此js檔案，這個檔案的路徑是不能改的，能改的只有檔案夾的名字。

 

　　此外掛程式調用WdatePicker() 方法預設顯示年月日如：

　　

　　如果你只想顯示年月，onclick="WdatePicker({dateFmt:‘yyyy-MM‘})" 即可，如

　　

　　

　　本來到這裡就應該結束了，不過後面需求又加了一個，說是要給開始時間和結束時間設定一個預設時間，經測試，此外掛程式並沒有相應的方法可以辦到。

　　然後我就想到了一個方法，用jquery擷取到開始時間和結束時間元素的值，然後調用原生JS new Date()方法，在用toLocaleDateString()轉一次

　　代碼如下:

　　　　$("#beginDate").val(new Date().toLocaleDateString());　　　　$("#endDate").val(new Date().toLocaleDateString()); 　　效果如：　　　　　　　　 　　Date對象方法詳見： http://www.w3school.com.cn/jsref/jsref_obj_date.asp  　　本以為這樣應該可以了吧，結果又說不能要日,只要年月,（我的內心是崩潰的）, 原生Date方法也沒有這個方法。焦急之餘向大神求助，大神就是給力啊,　　給了一個自己寫的方法，只要調用這個方法，然後在用substr()截取就可以了，代碼如下：　　

  $("#beginDate").val(GetDateStr().substr(0,7));      $("#endDate").val(GetDateStr().substr(0,7));      function GetDateStr(AddYear,AddMonth,AddDay) { //此參數為新增年月日，可以設定，也可以不設定            AddYear?AddYear:AddYear=0;            AddMonth?AddMonth:AddMonth=0;            AddDay?AddDay:AddDay=0;            var dd = new Date();            dd.setFullYear(dd.getFullYear()+AddYear);            dd.setMonth(dd.getMonth()+AddMonth);            dd.setDate(dd.getDate()+AddDay);            var y = dd.getFullYear();            var m = dd.getMonth()+1;            var d = dd.getDate();            return y+"-"+m;      }

 

　　效果如：　　  

　　附： 我就一條龍服務做到底吧，在附上一段代碼，主要用於判斷日期（起始時間不能大於結束時間 / 不能直接選擇結束時間，需要先選擇起始時間）　

$(document).ready(function(){         var createDateBegin = $("#beginDate");         var createDateEnd = $("#endDate");         $(createDateEnd).blur(function(){             if(createDateEnd.val()!="" && createDateBegin.val()!=""&&createDateEnd.val()<createDateBegin.val()){                 alert(‘開始時間不能大於結束時間!‘);                 $(createDateEnd).val("");                 return;             }             if((createDateBegin).val()==""){                 alert(‘請選擇起始時間!‘);                 $(createDateEnd).val("");                 return;             }             if((createDateBegin).val()!=""){                 return;             }         });        $(createDateBegin).blur(function(){             if(createDateEnd.val()!="" && createDateBegin.val()!=""&&createDateEnd.val()<createDateBegin.val()){                 alert(‘開始時間不能大於結束時間!‘);                 $(createDateEnd).val("");                     return;             }             if($(createDateEnd).val()!=""){                return;             }         });        });

 

　　　　

HTML5 input date屬性引起的探索——DatePicker（日期選擇外掛程式）