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 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
javascript简易画板开发
2020/04/12 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
python获取文件扩展名的方法
2015/07/06 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
Python super()方法原理详解
2020/03/31 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
详解python UDP 编程
2020/08/24 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
工作说明书格式
2014/07/29 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers