Bootstrap的DatePicker日期范圍選擇

用日期插件時，經常會有一種需求。兩個input框選擇。開始時間小于結束時間，結束時間大于開始時間，開始時間和結束時間都不大于當前時間。

我們當然可以用選擇的結果來判斷輸入正確與否。但是更好的辦法是讓我們的日期選擇插件做出一些限制。

Bootstrap搭配了很優秀的日期選擇插件。DatePicker和DateTimePicker。

兩者功能很類似。使用方法也是差不多的。DatePicker支持更多的事件和設置。

看api知道日期變化的時候會有一個事件changeDate。當選擇的日期變化的時候，會調用我們給這個事件的回調。但是遺憾的是當我們直接在輸入框中輸入或刪除日期的時候貌似并不會觸發到這個事件。所以可以把input框添加屬性 readonly。只讀狀態，并且給日期控件一個清除按鈕。這樣日期的變化正常情況下就只有通過日期插件來控制了。

然而當使用DateTimePicker插件點擊清除按鈕的時候，會報錯 Uncaught TypeError: Cannot read property 'getTime' of null，結果導致changeDate事件也不能正常使用。

所以就改用DatePicker插件。

然后當一個輸入框日期變化（包括清除）的時候，changeDate事件觸發，在其回調函數里修改另一個輸入框的可選范圍。

另外，DatePicker要使界面顯示中文，也需要加載css。bootstrap-datepicker.zh-CN.min.js。

function DatePicker(beginSelector,endSelector){  
          // 僅選擇日期  
          $(beginSelector).datepicker(  
          {  
            language:  "zh-CN",  
            autoclose: true,  
            startView: 0,  
            format: "yyyy-mm-dd",  
            clearBtn:true,  
            todayBtn:false,  
            endDate:new Date()  
          }).on('changeDate', function(ev){               
            if(ev.date){  
                $(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))  
            }else{  
                $(endSelector).datepicker('setStartDate',null);  
            }  
          })  
  
          $(endSelector).datepicker(  
          {  
            language:  "zh-CN",  
            autoclose: true,  
            startView:0,  
            format: "yyyy-mm-dd",  
            clearBtn:true,  
            todayBtn:false,  
            endDate:new Date()  
          }).on('changeDate', function(ev){    
            if(ev.date){  
                $(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))  
            }else{  
                $(beginSelector).datepicker('setEndDate',new Date());  
            }   
  
          })  
      }  
  
      DatePicker("#date_begin","#date_end");

Bootstrap DatePicker實現日期選擇開始日期不大于結束時間，結束時間不小于開始時間，開始日期和結束日期都不大于當前日期。

演示地址：http://runningls.com/demos/2016/daily/datepicker/

github:https://github.com/liusaint/JavaScript-record/tree/master/datepicker

轉載注明出處：http://blog.csdn.net/liusaint1992/article/details/52590681

posted @ 2016-10-24 15:37 Raffeale 閱讀(10976) 評論(0) 收藏舉報

刷新頁面返回頂部

Raffeale

web開發工程師一名,喜歡研究技術,學習新技術.愛好:讀書,電影,民謠,鄉村音樂,相聲,羽毛球,爬山,徒步,動物!

Bootstrap的DatePicker日期范圍選擇

公告