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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
JS实现打字游戏
2019/12/17 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
替换python字典中的key值方法
2018/07/06 Python
基于Python实现用户管理系统
2019/02/26 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Django数据库迁移常见使用方法
2020/11/12 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
优秀学生干部个人的自我评价
2013/10/04 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
小区文明倡议书
2014/05/16 职场文书
关爱留守儿童标语
2014/06/18 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
教师学期末个人总结
2015/02/13 职场文书
工作简报怎么写
2015/07/21 职场文书
高中英语教学反思范文
2016/03/02 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
HTTP中的Content-type详解
2022/01/18 HTML / CSS
python处理json数据文件
2022/04/11 Python