jquery UI Datepicker时间控件冲突问题解决


Posted in Javascript onDecember 16, 2016

公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题。
最近就遇到了一个比较坑的问题。datepicker
 有两个插件库中的datepicker插件比较有名。一个是jQuery-UI,一个是bootstrap。两个的api网址分别是

然而在项目中很不巧的两个库都用到了。然后就出现了以下情况:http://jqueryui.com/datepicker/   和  http://bootstrap-datepicker.readthedocs.io/en/latest/index.html

jquery UI Datepicker时间控件冲突问题解决

平时根本不知道我自己用的到底是哪个组件。

主要的问题是,要是你们两个组件能一样的话,我也就没什么问题了。两个组件在各种细节处完全不同。

这次的问题是 我的datepicker框被遮住了,具体如下图(上面的年份切换不见了):

        jquery UI Datepicker时间控件冲突问题解决

找了一下发现是在渲染组件的时候,给自动的加上了z-index:10,然后就被上面fixed的顶部条给遮住了。然而这种情况并不是必现的,在每个人电脑上出现的情况不同,在我看来就是先加载的是谁的组件造成的。(按理来说项目打包后是按照index.html文件中引用的顺序排的,应该也是相同的调用顺序,但是就是在一部分电脑上会出现顺序反过来。有大神能解答么?)

于是为了确定加载的是哪个,我写了下面的代码进行试验:

// 初始化日期控件
var $buyDate = $("input#abc");
var buyDateDatepicker = $buyDate.datepicker({
 language: "zh-CN",
 format: "yyyymm",
 minViewMode: "months",
 autoclose: true,
 onSelect: function() {
  console.log("a");
 },
 onClose: function() {
  console.log("b");
 }
});
$buyDate.on("show", function() {
 $(".datepicker.datepicker-dropdown.dropdown-menu").css("z-index", 1000);
});

这其中大多数都是公用的,其中onSelect、onClose是jQuery-UI的,on绑定的show事件是bootstrap的。

但是跑了一下之后,让我比较吃惊,一个都没有执行,全都没有用。然后静下来仔细考虑了一下,应该是这样。

1、先执行的是bootstrap的组件,先渲染了一遍。

2、然后又让jQuery-UI渲染了一遍,但是并没有覆盖之前的组件。

3、再执行了show事件的绑定。然而这个时候被jQuery-UI重新渲染过了,是读取不到监听事件的,随意也失效了。

我估计,在别人的电脑上,情况反了过来,他们先执行的是jQuery-UI的组件就是可以的。

我在网上都没有查到过其他的人写过相关的冲突的情况。有没有人遇到过,提供一下坑。以后避免踩坑。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
详解jQuery简单的表单应用
Dec 16 #Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 #Javascript
简单三步实现报表页面集成天气
Dec 15 #Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 #Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 #Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 #Javascript
javascript数组去重方法分析
Dec 15 #Javascript
You might like
php学习笔记之 函数声明(二)
2011/06/09 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP写日志的实现方法
2014/11/05 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
js实现文字截断功能
2016/09/14 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python实现堆排序的实例讲解
2020/02/21 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
人力资源部门的主要职能
2014/02/22 职场文书
租房协议书怎么写
2014/04/10 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
暂住证证明
2015/06/19 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏