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

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

一、引用

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<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的源代碼）（此刻在項目中遇到，自己折騰的出來的，可用；還不通透，有待進步）　　

最后面加入

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

 

　二、使用

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

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

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

所以我使用以下：

/**
 * 日歷
 * @param obj eles 日期輸入框
 * @param boolean dobubble    是否為雙日期（true）
 * @param boolean secondNot    有無時分秒（有則true）
 * @return none
 */
function calenders(eles,dobubble,secondNot){
    var singleNot,formatDate;
    if(dobubble ==true){
        singleNot = false;
    }else{
        singleNot = true;
    }
    if(secondNot ==true){
        formatDate = "YYYY-MM-DD HH:mm:ss";
    }else{
        formatDate = "YYYY-MM-DD";
    }
    
    $(eles).daterangepicker({
        "singleDatePicker": singleNot,
        "timePicker": secondNot,
        "timePicker24Hour": secondNot,
        "timePickerSeconds": secondNot,
        "showDropdowns":true,
        "timePickerIncrement" :1,
        "linkedCalendars": false,
        "autoApply":true,
        "autoUpdateInput":false, 
        "locale": {
            "direction": "ltr",
            "format": formatDate,
            "separator": "~",
            "applyLabel": "Apply",
            "cancelLabel": "Cancel",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "daysOfWeek": [
                "Su",
                "Mo",
                "Tu",
                "We",
                "Th",
                "Fr",
                "Sa"
            ],
            "monthNames": [
                "一月",
                 "二月",
                 "三月",
                 "四月",
                 "五月",
                 "六月",
                 "七月",
                 "八月",
                 "九月",
                 "十月",
                 "十一月",
                 "十二月"
            ],
            "firstDay": 1
        }
    }, function(start,end, label) {
        if(secondNot ==true&&dobubble ==true){
            $(eles).val($.trim(start.format('YYYY-MM-DD HH:mm:ss')+'~'+end.format('YYYY-MM-DD HH:mm:ss')));
        }else if(secondNot ==false&&dobubble ==true){
            $(eles).val($.trim(start.format('YYYY-MM-DD')+'~'+ end.format('YYYY-MM-DD')));
        }else if(secondNot ==false&&dobubble ==false){
             $(eles).val(start.format('YYYY-MM-DD'));
        }else if(secondNot ==true&&dobubble ==false){
            $(eles).val(start.format('YYYY-MM-DD HH:mm:ss'));
        }
    });
    //清空
    $(eles).siblings().click(function(){
        $(eles).val('');
    })
}

 

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

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

<div class="input-group">
    <input type="text" name="extractionDate11" id="extractionDate11" class="form-control dateStart" placeholder="請選擇起始時間" readonly size="30">
    <div class="input-group-addon clearBtns">x</div>
</div>
<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()替換。

outsideClick: function(e) {
    var target = $(e.target);
    // if the page is clicked anywhere except within the daterangerpicker/button
    // itself then call this.hide()
    if (
        // ie modal dialog fix
        e.type == "focusin" ||
        target.closest(this.element).length ||
        target.closest(this.container).length ||
        target.closest('.calendar-table').length
        ) return;
    // this.hide();
    if (this.isShowing){
        $(document).off('.daterangepicker');
        $(window).off('.daterangepicker');
        this.container.hide();
        this.element.trigger('hide.daterangepicker', this);
        this.isShowing = false;
    }
    this.element.trigger('outsideClick.daterangepicker', this);
},

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

/*this.oldStartDate = this.startDate.clone();
this.oldEndDate = this.endDate.clone();
this.previousRightTime = this.endDate.clone();*/

this.oldStartDate = this.startDate;
this.oldEndDate = this.endDate;
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方法中：添加可以如下對照以下代碼：

clickRange: function(e) {
    var label = e.target.getAttribute('data-range-key');
    this.chosenLabel = label;
    if (label == this.locale.customRangeLabel) {
        this.showCalendars();
    // } else {
        }else if (!this.endDate && date.isBefore(this.startDate)) {
        this.autoUpdateInput=true;
            //special case: clicking the same date for start/end,
            //but the time of the end date is before the start date
            this.setEndDate(this.startDate.clone());
        } else { // picking end
        this.autoUpdateInput=true;


        var dates = this.ranges[label];
        this.startDate = dates[0];
        this.endDate = dates[1];

        if (!this.timePicker) {
            this.startDate.startOf('day');
            this.endDate.endOf('day');
        }

        if (!this.alwaysShowCalendars)
            this.hideCalendars();
        this.clickApply();
    }
},

2）、在1340行左右，兩處添加  this.autoUpdateInput=true; 請對照以下：

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

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

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