daterangepicker 清空_daterangepicker 一些操作不便的修复

一.前言

最近在优化项目前端，老板非想要一个时间范围的选择，觉得用两个时间输入框操作不便。看到网上有三种：分别是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));

}