修复bootstrap daterangepicker不能清空日期的问题

发布时间：2020-12-17 21:00:00 所属栏目：安全来源：网络整理

导读：最近项目中使用了一个基于Bootstrap的daterangepicker控件。 1.点击页面其他空白的地方，会把之前在日历上选中的日期选择上。具体描述： 1.点击打开日期选择框 2.选择一个日期范围，用户没有点击“Apply”按钮，然后点击页面其他空白区域，控件会把选择的日

最近项目中使用了一个基于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();//注释代码 
       
        ???????????  
        //添加的代码，这里只是隐藏显示，不做任何赋值操作 
       
        ???????????? 
         
 ?????????????????????? if (this.isShowing){ 
       
 ???????????????????????????????? $(document).off('.daterangepicker'); 
       
 ?????????????? ? ? ? ? ? ? ? ??? $(window).off('.daterangepicker'); 
       
 ?????????????????????????????? ? this.container.hide(); 
       
 ?????????????? ? ? ? ? ? ? ? ??? this.element.trigger('hide.daterangepicker',this); 
       
 ?????????????? ? ? ? ? ? ? ? ? ? this.isShowing = false; 
       
 ?????????? ? ? ? ? ? ?? } 
        
        ???????? 
        },

?这个修改主要是针对singleDatePicker=true的情况，如果是选时间范围的或者是要选择日期时间的，会出现apply和cancel两个按钮

可以在点击cancel的时候，在cancel.daterangepicker事件中，去清除input的值。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!