HTML5 input date屬性引起的探索——My97DatePicker（日期選擇插件）

不得不說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;
             }
         });
        });