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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 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
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Python抽象类的新写法
2015/06/18 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python input函数使用实例解析
2019/11/22 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python中turtle库的简单使用教程
2020/11/11 Python
财务总经理岗位职责
2014/02/16 职场文书
个人存款证明书
2014/10/18 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
爱心募捐感谢信
2015/01/22 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书