开发者社区> liminjun88> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Bootstrap补充内容
Bootstrap补充内容
9 0
bootstrap-datetimepicker 配置全面指南 ( version : 4.17.47 )
bootstrap-datetimepicker https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.
2589 0
Vue中引入JQuery和Bootstrap方法
一、Vue中引入JQuery 1、因为已经安装了vue-cli脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。
2260 0
bootstrap-datetimepicker 实现小时分钟显示
最近做项目时,使用bootstrap-datetimepicker插件显示小时分钟,遇到问题记录如下: 1.首先显示小时分钟可选     minView:0 或者'hour',  也可不传,默认为0 2.
3242 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载