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

目录
相关文章
|
2月前
|
编解码 前端开发 JavaScript
|
2月前
|
前端开发
BootStrap文档(二)
BootStrap文档
36 0
|
2月前
|
机器学习/深度学习 前端开发 算法
BootStrap文档(三)
BootStrap文档
21 0
|
4月前
|
移动开发
解决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 安全
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
|
JavaScript API
NG2.4.10升级NG4正式版[正式项目]:修正AOT打包报错的一些问题
上周五,ng4正式发布了。。很多小伙伴迫不及待的把项目升级了。。。 然后到群里各种吼,无损升级,没有什么奇葩问题,大家放心升级。。 我信了。。。把公司的项目给升级了,然后就开始掉坑了。。。 普通的开发模式和打包模式皆正常,不正常的是AOT打包。。
106 0
|
前端开发 JavaScript 开发者
|
Web App开发 前端开发
如何停止在Joomla中多次加载Bootstrap
Bootstrap是用于构建和设计网站的最受欢迎的CSS框架。开发人员和设计师都很依赖它。
如何停止在Joomla中多次加载Bootstrap
|
前端开发 数据库管理 索引
20180614删除bootstrap$记录无法启动3补充
[20180614][20180614]删除bootstrap$记录无法启动3(补充).txt --//昨天测试删除bootstrap$记录,导致数据库重启出现问题的修复方法: --//链接: http://blog.
1197 0