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));
}

你可能感兴趣的:(daterangepicker 一些操作不便的修复)