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,有空研究学习下
Jan 25 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
记一次vue跨域的解决
Oct 21 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
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python实现井字棋小游戏
2020/03/04 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
本科生导师推荐信范文
2014/05/18 职场文书
公司委托书格式范文
2014/10/09 职场文书
自我检讨报告
2015/01/28 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL