修复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);
        },

目录
相关文章
|
6月前
|
编解码 前端开发 JavaScript
|
6月前
|
前端开发
BootStrap文档(二)
BootStrap文档
50 0
|
5月前
|
前端开发 JavaScript 开发者
Bootstrap 3.x 版本基础引入指南
Bootstrap 3.x 版本基础引入指南
|
6月前
|
机器学习/深度学习 前端开发 算法
BootStrap文档(三)
BootStrap文档
35 0
|
6月前
|
移动开发
解决uniapp发布H5项目生产环境运行报错index.63b34199.css:1 Failed to load resource: the server responded with a
解决uniapp发布H5项目生产环境运行报错index.63b34199.css:1 Failed to load resource: the server responded with a
|
缓存 JavaScript
我修复了一个 Vite Bug,让我的项目首屏性能提高了 25%
我修复了一个 Vite Bug,让我的项目首屏性能提高了 25%
231 0
|
前端开发 JavaScript 安全
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
|
前端开发
Recat 引入antd CSS 报警告 解决方法
Recat 引入antd CSS 报警告 解决方法
1111 0
|
Web App开发 前端开发
如何停止在Joomla中多次加载Bootstrap
Bootstrap是用于构建和设计网站的最受欢迎的CSS框架。开发人员和设计师都很依赖它。
如何停止在Joomla中多次加载Bootstrap
|
前端开发 数据库管理 索引
20180614删除bootstrap$记录无法启动3补充
[20180614][20180614]删除bootstrap$记录无法启动3(补充).txt --//昨天测试删除bootstrap$记录,导致数据库重启出现问题的修复方法: --//链接: http://blog.
1222 0