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+JS构建的图片查看器
Jul 22 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
js模拟实现烟花特效
Mar 10 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
详解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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
Python实现队列的方法
2015/05/26 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
建龙钢铁面试总结
2014/04/15 面试题
分公司总经理岗位职责
2014/07/30 职场文书
会计实训报告范文
2014/11/04 职场文书
教师考核表个人总结
2015/02/12 职场文书
高三物理教学反思
2016/02/20 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
导游词之天津古文化街
2019/11/09 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL