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的組件就是能夠的。

---

我在網上都沒有查到過其餘的人寫過相關的衝突的狀況。有沒有人遇到過，提供一下坑。之後避免踩坑。