最近项目中使用了一个基于Bootstrap的daterangepicker控件。
1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上。
具体描述:
1.点击打开日期选择框
2.选择一个日期范围,用户没有点击“Apply”按钮,然后点击页面其他空白区域,控件会把选择的日期赋值到文本框中去。
这个需求估计在国外属于正常的情况。但是国内的用户习惯是:点击其他空白地方,应该是和点击“取消”按钮相同的作用。所以看了一下源代码。在outsideClick方法里面,作者直接调用了hide()方法,这个方法正好做了将选中的日期范围赋值给文本框。修改代码行数在Line616,问题可以解决。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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();//注释代码
//添加的代码,这里只是隐藏显示,不做任何赋值操作
$(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的值。