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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PDO实现学生管理系统
2020/03/21 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
学习ExtJS table布局
2009/10/08 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
英语系毕业生自荐信
2013/10/31 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
小学班主任评语大全
2014/04/23 职场文书