修復bootstrap daterangepicker中的3個問題

最近項目中使用了一個基於Bootstrap的daterangepicker控件。

1.點擊頁面其他空白的地方，會把之前在日歷上選中的日期選擇上。

具體描述：

1.點擊打開日期選擇框

2.選擇一個日期范圍，用戶沒有點擊“Apply”按鈕，然后點擊頁面其他空白區域，控件會把選擇的日期賦值到文本框中去。

這個需求估計在國外屬於正常的情況。但是國內的用戶習慣是：點擊其他空白地方，應該是和點擊“取消”按鈕相同的作用。所以看了一下源代碼。在outsideClick方法里面，作者直接調用了hide()方法，這個方法正好做了將選中的日期范圍賦值給文本框。修改代碼行數在Line616，問題可以解決。

outsideClick: function (e) {
            var target = $(e.target);
            // if the page is clicked anywhere except within the daterangerpicker/button
            // itself then call this.hide()
            if (
                target.closest(this.element).length ||
                target.closest(this.container).length ||
                target.closest('.calendar-date').length
                ) return;
            //this.hide();//注釋代碼
    //添加的代碼，這里只是隱藏顯示，不做任何賦值操作
            this.element.removeClass('active');
            this.container.hide();
            this.element.trigger('hide.daterangepicker', this);
        },

 

2.Bootstrap daterangepicker在BootStrap Modal里面無效。

問題描述：

1.在Bootstrap Modal對話里面打開daterangepicker出現如下界面

2.選擇一個日期，點擊“Apply”按鈕，發現選中的日期不能賦值到文本框中。這里是因為我復制modal代碼時，modal代碼上面有一個tabindex=”-1”，將這個屬性刪除，就能正常運行。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

3.在IE中，已經移除了tabindex=”-1”，代碼已經不能運行正常。選中不了已經選擇的時間范圍。

需要繼續修改代碼：

outsideClick: function (e) {
            var target = $(e.target);
            // if the page is clicked anywhere except within the daterangerpicker/button
            // itself then call this.hide()
            if (
                 e.type == "focusin"||    
                target.closest(this.element).length ||
                target.closest(this.container).length ||
                target.closest('.calendar-date').length
                ) return;
            //this.hide();
            this.element.removeClass('active');
            this.container.hide();
            this.element.trigger('hide.daterangepicker', this);
        },

參考網址：

1.GitHub地址 https://github.com/dangrossman/bootstrap-daterangepicker

2.Demo地址： http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/