修复bootstrap daterangepicker中的3个问题

简介:

最近项目中使用了一个基于Bootstrap的daterangepicker控件。

1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上。

具体描述:

1.点击打开日期选择框

2.选择一个日期范围,用户没有点击“Apply”按钮,然后点击页面其他空白区域,控件会把选择的日期赋值到文本框中去。

image

这 个需求估计在国外属于正常的情况。但是国内的用户习惯是:点击其他空白地方,应该是和点击“取消”按钮相同的作用。所以看了一下源代码。在 outsideClick方法里面,作者直接调用了hide()方法,这个方法正好做了将选中的日期范围赋值给文本框。修改代码行数在Line616,问 题可以解决。

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();//注释代码
    //添加的代码,这里只是隐藏显示,不做任何赋值操作
            this.element.removeClass('active');
            this.container.hide();
            this.element.trigger('hide.daterangepicker', this);
        },

2.Bootstrap daterangepicker在BootStrap Modal里面无效。

问题描述:

1.在Bootstrap Modal对话里面打开daterangepicker出现如下界面

image

2.选择一个日期,点击“Apply”按钮,发现选中的日期不能赋值到文本框中。这里是因为我复制modal代码时,modal代码上面有一个tabindex=”-1”,将这个属性删除,就能正常运行。



<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

3.在IE中,已经移除了tabindex=”-1”,代码已经不能运行正常。选中不了已经选择的时间范围。

需要继续修改代码:

outsideClick: function (e) {
            var target = $(e.target);
            // if the page is clicked anywhere except within the daterangerpicker/button
            // itself then call this.hide()
            if (
                 e.type == "focusin"||    
                target.closest(this.element).length ||
                target.closest(this.container).length ||
                target.closest('.calendar-date').length
                ) return;
            //this.hide();
            this.element.removeClass('active');
            this.container.hide();
            this.element.trigger('hide.daterangepicker', this);
        },

目录
相关文章
|
前端开发 JavaScript 容器
bootstrap-treeview树
bootstrap-treeview树
215 0
|
Oracle 安全 算法
重磅!JDK 17 发布,Oracle 宣布从 JDK 17 开始正式免费。。
JDK 16 刚发布半年(2021/03/16),JDK 17 又如期而至(2021/09/14),这个时间点牛逼啊,蹭苹果发布会的热度?记得当年 JDK 15 的发布也是同天,巧了。。
重磅!JDK 17 发布,Oracle 宣布从 JDK 17 开始正式免费。。
|
11月前
|
Kubernetes 网络协议 网络安全
Pod之间的通信问题
【10月更文挑战第6天】
363 4
|
12月前
|
安全 API 开发工具
Android平台RTMP推送|轻量级RTSP服务如何实现麦克风|扬声器声音采集切换
Android平台扬声器播放声音的采集,在无纸化同屏等场景下,意义很大,早期低版本的Android设备,是没法直接采集扬声器audio的(从Android 10开始支持),所以,如果需要采集扬声器audio,需要先做系统版本判断,添加相应的权限。
260 0
|
网络协议 安全 Windows
【bat】批处理脚本大全
【bat】批处理脚本大全
414 2
|
SQL 存储 数据库
创建SQL Server视图
【8月更文挑战第19天】创建SQL Server视图
205 1
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
722 0
|
存储 机器学习/深度学习 API
开源向量数据库比较:Chroma, Milvus, Faiss,Weaviate
该文探讨了向量数据库在语义搜索和RAG中的核心作用,并介绍了四个开源向量数据库:Chroma、Milvus、Faiss和Weaviate。这些数据库用于存储高维向量,支持基于相似性的快速搜索,改变了传统的精确匹配方法。文章详细比较了它们的特性,如Chroma的易用性,Milvus的存储效率,Faiss的GPU加速,和Weaviate的图数据模型。选择合适的数据库取决于具体需求,如数据类型、性能和使用场景。
2865 0
|
JavaScript
jQuery 复选框 checkbox 取值和赋值
jQuery 复选框 checkbox 取值和赋值
223 0
|
JSON 前端开发 数据格式
CSS横向滚动条自定义样式
CSS横向滚动条自定义样式
310 0