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下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
Vue 事件的$event参数=事件的值案例
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
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jcrop基本参数一览
2013/07/16 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
python实现电脑自动关机
2018/06/20 Python
浅析python参数的知识点
2018/12/10 Python
详解Python传入参数的几种方法
2019/05/16 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python 日期与时间转换的方法
2020/08/01 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
Python修改DBF文件指定列
2020/12/19 Python
python实现按日期归档文件
2021/01/30 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
学生请假条
2014/04/11 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP