datepicker冲突
公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题。
最近就遇到了一个比较坑的问题。datepicker
有两个插件库中的datepicker插件比较有名。一个是jQuery-UI,一个是bootstrap。两个的api网址分别是
然而在项目中很不巧的两个库都用到了。然后就出现了以下情况:http://jqueryui.com/datepicker/ 和 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html
平时根本不知道我自己用的到底是哪个组件。
主要的问题是,要是你们两个组件能一样的话,我也就没什么问题了。两个组件在各种细节处完全不同。
这次的问题是 我的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的组件就是可以的。
我在网上都没有查到过其他的人写过相关的冲突的情况。有没有人遇到过,提供一下坑。以后避免踩坑。
datepicker冲突的更多相关文章
- 使用datepicker和uploadify的冲突解决(IE双击才能打开附件上传对话框)
在开发的过程当中,IE的兼容无疑是我们的一块绊脚石,在我们使用的如期的datepicker插件和使用上传附件的uploadify插件的时候,两者就产生冲突,只要点击过时间的插件,uploadify上传 ...
- jquery.datepicker、jquery.validate、jquery.uploadify冲突解决
Jquery 1.11.2 Jquery.validate 1.13.1 Jquery.Uploadify 3.2(flash版) Jquery.DatePicker 用的是Jquery-ui 1.1 ...
- 时间插件datepicker(jQuery-UI,bootstrap)和jquery-steps的冲突解决。。。
日期插件初始化: $('.prelease_time').flatpickr(); let contentSteps = $("#content_form").steps({ h ...
- My97 DatePicker 日期选择插件.
My97DatePicker是一个纯js写的时间插件,体积较小,更可以自己扩展皮肤,且样式不和页面相冲突,有多钟配置,近期项目用了一下感觉还不错...分享给大家 软件官网:http://www.my9 ...
- 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...
- 如何使用jqueryUi的datepicker日历控件?
参考: http://www.jb51.net/article/85007.htm 这里的日历控件是, 基于jquery的jqureyui中的一个 widget. 需要js 文件: 外部的js文件, ...
- jQueryUI datepicker 报错: TypeError: inst is undefined
前提:要引用的js等都引用好了 调用日期控件的input: <input id="starttime" name="starttime" class=&q ...
- 前端jQuery日历控件报错 $("#datepicker").datepicker is not a function
使用日历控件时,前端产生错误: $("#datepicker").datepicker is not a function 问题原因 前端在同一个页面,jQuery引入了两次. 解 ...
- Alwayson的IP冲突
Alwayson的IP冲突 https://social.technet.microsoft.com/Forums/office/en-US/4d50cb1c-eef7-4dcc-b937-3c8eb ...
随机推荐
- c++ 职责链模式(Chain of Responsibility)
职 责链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处 理它为止.其思想很简单,考虑员工要求加薪.公司的管 ...
- 关于bootstrapValidator提交问题的解决
关于bootstrapValidator的AJAX提交有几种方法: 1.form中一定要放一个类型为submit的按钮,然后添加 success.form.bv 事件,如下 on('success.f ...
- apache下virtualhost与location合用配置转发SVN控制访问
使用apache的文件系统配置 使用virtualhost 实现location 重定向 NameVirtualHost *:80 <VirtualHost *:80> ServerNam ...
- Android之输入框光标和Hint的位置
如图所示,要实现这一的需求,一般人的布局方式就是左边一button,右边一button,中间一个EditText,为了输入框的响应触摸范围更大往往不会把宽度设置为wrap_content,要么设置成m ...
- oracle监听程序无法启动(TNS-12560: TNS: 协议适配器错误,TNS-00530: 协议适配器错误)
问题描述1: C:\Users\Administrator>lsnrctl start LSNRCTL for 64-bit Windows: Version 11.2.0.1.0 - Pr ...
- Fireasy新版本发布
1.5.40.42028 2015-2-4 ** Fireasy.Common 1.DynamicBuilder新增使用表达式SetCustomAttribute的重载方法 2.DateTimeEx ...
- Supervisor – 用于 Unix 系统的进程监控工具
Supervisor 是一个客户端/服务端模式的系统,使用户能够监视和控制 UNIX 操作系统的进程.Supervisor 为你提供一个地方来启动,停止和监视进程.进程可以单独或成组的形式控制.您还可 ...
- Java工程师面试题,整理自网络与博主各种笔试面试,持续更新
1.面向对象的特征有哪些方面? 封装:通常认为封装是把数据和操作数据的方法绑定起来,对数据的访问只能通过已定义的接口. 多态性:多态性是指允许不同子类型的对象对同一消息作出不同的响应.简单的说就是用同 ...
- CSS魔法堂:选择器及其优先级
一.前言 首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...
- WatiN框架学习二——对弹窗的处理
以IE为例,WatiN处理弹出窗口: IE ie = new IE("string"); //打开指定web页 ie.Button(Find.ById("string&q ...