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 相关文章推荐
JavaScript学习笔记(十)
Jan 17 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
微信小程序button组件使用详解
2018/01/31 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
vue实现分页加载效果
2019/12/24 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python 布尔操作实现代码
2013/03/23 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
高三自我评价
2014/02/01 职场文书
副董事长岗位职责
2014/04/02 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
教师三严三实心得体会
2014/10/11 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL