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的。

可是跑了一下以后，让我比较吃惊，一个都没有执行，全都没有用。而后静下来仔细考虑了一下，应该是这样。

一、先执行的是bootstrap的组件，先渲染了一遍。

二、而后又让jQuery-UI渲染了一遍，可是并无覆盖以前的组件。

三、再执行了show事件的绑定。然而这个时候被jQuery-UI从新渲染过了，是读取不到监听事件的，随意也失效了。

我估计，在别人的电脑上，状况反了过来，他们先执行的是jQuery-UI的组件就是能够的。

---

我在网上都没有查到过其余的人写过相关的冲突的状况。有没有人遇到过，提供一下坑。之后避免踩坑。