一.前言
最近在优化项目前端，老板非想要一个时间范围的选择，觉得用两个时间输入框操作不便。看到网上有三种：分别是mobiscroll，用于手机端；jquery下的插件 Date Range Picker；基于bootstrap的daterangepicker。看了下官方文档，Date Range Picker和daterangepicker样子差不多。想着项目大体用的bootstrap，那就用daterangepicker吧。结果发现好多操作不便的小问题（不知道是不是我操作方式奇葩。。。）。善始善终，那就改源码吧。
二、小bug修复
1.输入框默认值为当前时间，可我们要自己的提示咋办，"autoUpdateInput":false可以做到，但是，它居然让输入框一直都没值，这就不好了。百度了下，机智的网友给出了解决方案，在某些地方，设置autoUpdateInput为true。
a. clickRange方法修改成如下：
} 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();
}
b.clickDate方法中增加
} 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;
2.打开日期控件后，点击外边空白处以及选了时间，但是没有点“确定”而是点”取消“后，时间控件输入框会写入时间。
a.clickCancel方法注释掉this.hide(),改成以下代码：
if (this.isShowing){
$(document).off('.daterangepicker');
$(window).off('.daterangepicker');
this.container.hide();
this.element.trigger('hide.daterangepicker', this);
this.isShowing = false;
}
b.outsideClick方法中也像上面那样将this.hide()改掉
c.show方法中，改成如下，注释掉的为原来的，下面是新增的
// 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;
3.鼠标移到日期选择的某个日期时，上面对应的输入框的值也会跟着一直变化，但是当我选择了两个日期后，鼠标再移在上面，还变化就不好了，让我以为上面开始时间和结束时间输入框数据出了问题，所以一气之下，去掉了这个特性。
hoverDate方法中，将下面两行注释掉（以下代码我注释的部分就是）：
if (this.endDate && !this.container.find('input[name=daterangepicker_start]').is(":focus")) {
// this.container.find('input[name=daterangepicker_start]').val(date.format(this.locale.format));
} else if (!this.endDate && !this.container.find('input[name=daterangepicker_end]').is(":focus")) {
// this.container.find('input[name=daterangepicker_end]').val(date.format(this.locale.format));
}
