修复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月前
|
测试技术 API
修改bug引入更多bug怎么办?
修改bug引入更多bug怎么办?
135 0
Bootstrap5 小工具3
`rounded` 类及其变体用于为图像或元素添加圆角效果。包括 `rounded`(标准圆角)、`rounded-circle`(圆形)、`rounded-pill`(药丸形)等。此外,`rounded-0` 至 `rounded-3` 可调整圆角的半径大小。示例代码展示了不同圆角效果的应用。
Bootstrap5 小工具4
使用 .float-start 和 .float-end 类可使元素分别向左和向右浮动,.clearfix 类用于清除浮动影响。此外,可根据屏幕尺寸设置浮动效果,如 .float-sm-end 表示在小屏幕及以上尺寸向右浮动。示例展示了不同屏幕尺寸下的浮动效果及清除浮动的用法。
Bootstrap5 小工具2
通过使用 `border` 及其相关类,可以灵活地为元素添加边框,包括控制边框的宽度、颜色和具体哪一侧显示边框。例如,`.border-1` 至 `.border-5` 设置不同宽度,`.border-primary` 等设置不同颜色。
|
2天前
|
前端开发
Bootstrap5 小工具1
Bootstrap 5 提供了多种背景颜色类(如 .bg-primary、.bg-success 等),搭配 .text-* 类可调整文本颜色,确保对比度和可读性。同时,使用 .bg-gradient 类可轻松实现背景渐变效果。示例展示了不同背景色及其渐变版本的应用。
|
5月前
|
前端开发 JavaScript 开发者
Bootstrap 3.x 版本基础引入指南
Bootstrap 3.x 版本基础引入指南
|
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
|
安全 测试技术 Android开发
案例04-生产环境App打包不能自动升级
生产环境App打包不能自动升级
100 0
|
前端开发 JavaScript 安全
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】