daterangepicker 使用方法以及各種小bug修復


雙日歷時間段選擇插件 — daterangepicker是bootstrap框架后期的一個時間控件,可以設定多個時間段選項,也可以自定義時間段,由用戶自己選擇起始時間和終止時間,時間段的最大跨度可以在程序里設定。

一、引用

daterangepicker依托monent.js 和jquery使用。所以在使用中在引入daterangepicker之前必須引入monent.js和jquery以及bootstrap。

1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="moment.js"></script>
3 <script type="text/javascript" src="daterangepicker.js"></script>
4 <link rel="stylesheet" type="text/css" href="bootstrap.css" />
5 <link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

或者在使用模塊化編程時,比如使用seaj.js時,在整個代碼壓縮前面加入

define("gallery/daterangepicker/1.3.7/daterangepicker",["jquery","moment","./daterangepicker-bs3.css"],
    function(a){a("jquery");window.moment=a("moment"),a("./daterangepicker-bs3.css"),

(中間可以加入daterangepicker.js的源代碼)(此刻在項目中遇到,自己折騰的出來的,可用;還不通透,有待進步)  

最后面加入

1 define("gallery/daterangepicker/1.3.7/daterangepicker-bs3.css",[],function(){
2     seajs.importStyle(".daterangepicker{position:absolute;color:inherit;.........}"
3 )})
4 })

 

 二、使用

在使用中,需要注意datetimepicker的參數配置(這個在官網上都可以查到),此處我想說明的是,可以在官網上下載源碼,根據其demo來配置參數了解其各個用處

在上面的復選框中通過選擇,可以配置不同的參數。此處簡單說明一下自己在項目中所用到的參數,以及使用方法。

由於項目整個系統,存在雙日期或者單日期,或者有時分秒或者無時分秒。所以兩兩組合分為四種情況。

所以我使用以下:

 1 /**
 2  * 日歷
 3  * @param obj eles 日期輸入框
 4  * @param boolean dobubble    是否為雙日期(true)
 5  * @param boolean secondNot    有無時分秒(有則true)
 6  * @return none
 7  */
 8 function calenders(eles,dobubble,secondNot){
 9     var singleNot,formatDate;
10     if(dobubble ==true){
11         singleNot = false;
12     }else{
13         singleNot = true;
14     }
15     if(secondNot ==true){
16         formatDate = "YYYY-MM-DD HH:mm:ss";
17     }else{
18         formatDate = "YYYY-MM-DD";
19     }
20     
21     $(eles).daterangepicker({
22         "singleDatePicker": singleNot,
23         "timePicker": secondNot,
24         "timePicker24Hour": secondNot,
25         "timePickerSeconds": secondNot,
26         "showDropdowns":true,
27         "timePickerIncrement" :1,
28         "linkedCalendars": false,
29         "autoApply":true,
30         "autoUpdateInput":false, 
31         "locale": {
32             "direction": "ltr",
33             "format": formatDate,
34             "separator": "~",
35             "applyLabel": "Apply",
36             "cancelLabel": "Cancel",
37             "fromLabel": "From",
38             "toLabel": "To",
39             "customRangeLabel": "Custom",
40             "daysOfWeek": [
41                 "Su",
42                 "Mo",
43                 "Tu",
44                 "We",
45                 "Th",
46                 "Fr",
47                 "Sa"
48             ],
49             "monthNames": [
50                 "一月",
51                  "二月",
52                  "三月",
53                  "四月",
54                  "五月",
55                  "六月",
56                  "七月",
57                  "八月",
58                  "九月",
59                  "十月",
60                  "十一月",
61                  "十二月"
62             ],
63             "firstDay": 1
64         }
65     }, function(start,end, label) {
66         if(secondNot ==true&&dobubble ==true){
67             $(eles).val($.trim(start.format('YYYY-MM-DD HH:mm:ss')+'~'+end.format('YYYY-MM-DD HH:mm:ss')));
68         }else if(secondNot ==false&&dobubble ==true){
69             $(eles).val($.trim(start.format('YYYY-MM-DD')+'~'+ end.format('YYYY-MM-DD')));
70         }else if(secondNot ==false&&dobubble ==false){
71              $(eles).val(start.format('YYYY-MM-DD'));
72         }else if(secondNot ==true&&dobubble ==false){
73             $(eles).val(start.format('YYYY-MM-DD HH:mm:ss'));
74         }
75     });
76     //清空
77     $(eles).siblings().click(function(){
78         $(eles).val('');
79     })
80 }

 

由於daterangepicker沒有自帶清空功能,而項目要求中,有時候日期框要為空,所以我在input框后面加了一個叉按鈕。如下圖效果,實現清空

代碼可以作為參考(這個有各種實現方式)

1 <div class="input-group">
2     <input type="text" name="extractionDate11" id="extractionDate11" class="form-control dateStart" placeholder="請選擇起始時間" readonly size="30">
3     <div class="input-group-addon clearBtns">x</div>
4 </div>
5 <span class="caret"></span>

而對於各種情況下的的引用:

單日期不帶時分秒: calenders("#bgrq",false,false); 

單日期帶時分秒:calenders('#inputDate',false,true); 

雙日期不帶時分秒: calenders('#extractionDate11',true,false); 

雙日期帶時分秒:calenders('#extractionDate11',true,true); 

三、問題解決

1、點開下拉日期框,點擊空白處,日期框關閉,傳值問題

由於daterangepicker所做的功能是:在點開下拉日期框后,點擊頁面其他地方,日期框關閉,此時之前所選的日期值就自動保存到日期框上,而我們的習慣時,這樣的操作相當於取消,所以在源碼上做一修改:

在源碼中搜索outsideClick方法:

將其中的this.hide()替換。

 1 outsideClick: function(e) {
 2     var target = $(e.target);
 3     // if the page is clicked anywhere except within the daterangerpicker/button
 4     // itself then call this.hide()
 5     if (
 6         // ie modal dialog fix
 7         e.type == "focusin" ||
 8         target.closest(this.element).length ||
 9         target.closest(this.container).length ||
10         target.closest('.calendar-table').length
11         ) return;
12     // this.hide();
13     if (this.isShowing){
14         $(document).off('.daterangepicker');
15         $(window).off('.daterangepicker');
16         this.container.hide();
17         this.element.trigger('hide.daterangepicker', this);
18         this.isShowing = false;
19     }
20     this.element.trigger('outsideClick.daterangepicker', this);
21 },

同時,必須將show方法中的更改,否則當用戶選擇雙日期時若只選擇了一個日期然后點擊空白處,而下一次再點擊input框時就報錯了,無法再使用了。

1 /*this.oldStartDate = this.startDate.clone();
2 this.oldEndDate = this.endDate.clone();
3 this.previousRightTime = this.endDate.clone();*/
4 
5 this.oldStartDate = this.startDate;
6 this.oldEndDate = this.endDate;
7 this.previousRightTime = this.endDate;

2、日期初始為空的問題

daterangepicker在初始時會給所綁定的input框自動賦值當前日期,即參數 "autoUpdateInput":true/false,  當其為true時會自動加上日期,在選擇false時就初始為空,可是在后面選擇日期后有的情況下不會自動應用。所以要做一些修改(此借鑒於博友http://blog.csdn.net/qq_33518042/article/details/77175645)此處我們更明晰一點

(引用:在此我們可以使用autoUpdateInput屬性,autoUpdateInput是用來打開和關閉daterangepicker選擇時,是否自動傳值到input[text] 這個DOM的屬性,通過設置初始autoUpdateInput為false,可以實現初始值為空,這是在input中設置的placeholder才能正常顯現出來。但是設置該屬性之后,不管怎么選擇daterangePikcer的日期,都不會有傳值到input中,也就是沒有辦法正常顯示選擇的日期了,所以要在恰當的時刻,調用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。作者最初設置為,最初默認值為空,當daterangepicker 的input發生點擊時,autoUpadateInput=true,但是這時出現input不管是否選中日期,都會自動有值,所以為了修改這個問題,我在daterangepicker的源碼中進行了修改,當然也可以重新更改需要的onclick事件。

在源碼中,當autoUpdateInput設置為false之后,我們想要在點擊確定,選中日期和點擊range三個地方,將autoUpdateInput改變回來,所以,在三處設置this.autoUpdateInput=true屬性)

1)在1210行左右的clickRange方法中:添加可以如下對照以下代碼:

 1 clickRange: function(e) {
 2     var label = e.target.getAttribute('data-range-key');
 3     this.chosenLabel = label;
 4     if (label == this.locale.customRangeLabel) {
 5         this.showCalendars();
 6     // } else {
 7         }else if (!this.endDate && date.isBefore(this.startDate)) {
 8         this.autoUpdateInput=true;
 9             //special case: clicking the same date for start/end,
10             //but the time of the end date is before the start date
11             this.setEndDate(this.startDate.clone());
12         } else { // picking end
13         this.autoUpdateInput=true;
14 
15 
16         var dates = this.ranges[label];
17         this.startDate = dates[0];
18         this.endDate = dates[1];
19 
20         if (!this.timePicker) {
21             this.startDate.startOf('day');
22             this.endDate.endOf('day');
23         }
24 
25         if (!this.alwaysShowCalendars)
26             this.hideCalendars();
27         this.clickApply();
28     }
29 },

2)、在1340行左右,兩處添加  this.autoUpdateInput=true; 請對照以下:

 1 } else if (!this.endDate && date.isBefore(this.startDate)) {
 2     this.autoUpdateInput=true;
 3     //special case: clicking the same date for start/end,
 4     //but the time of the end date is before the start date
 5     this.setEndDate(this.startDate.clone());
 6 } else { // picking end
 7     this.autoUpdateInput=true;
 8     if (this.timePicker) {
 9         var hour = parseInt(this.container.find('.right .hourselect').val(), 10);
10         if (!this.timePicker24Hour) {
11             var ampm = this.container.find('.right .ampmselect').val();
12             if (ampm === 'PM' && hour < 12)
13                 hour += 12;
14             if (ampm === 'AM' && hour === 12)
15                 hour = 0;
16         }

3)、在1400行左右,給clickApply方法中添加  this.autoUpdateInput=true; 

1 clickApply: function(e) {
2     this.autoUpdateInput=true;
3     this.hide();
4     this.element.trigger('apply.daterangepicker', this);
5 },

 

  

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM