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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,367评论 19 139
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,813评论 2 45
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 34,248评论 18 399
  • 斯人一去不复返, 昨日旧情随烟飞。 耳畔山盟似讥语, 怨芳菲, 情深却阻阮郎归。
    五月慕晴阅读 339评论 0 2
  • 明天就是一年一度的教师节了,相信许多在校学生已经在想明天要怎么给自己的恩师表白了,或者礼物都已准备好就等明天送出去...
    行走的小熊阅读 414评论 0 0

友情链接更多精彩内容