bootstrop 日期控件 datepicker被彈出框dialog覆蓋的解決辦法

筒子們在使用bootstrap的日期控件（datepicker ， 如今官網提供的名稱叫 datetimepicker）時可能會遇到如上圖的問題這是啥緣由形成的呢？

答案很簡單時輸出的優先級形成的（z-index）

z-index 的值越大優先級越高 就會越顯示靠前上圖的狀況就是dialog的 x-index的值大於datepicker的值

上圖找到了對應控件的css樣式後修改x-index的值直到datepicker 的控件顯示在dialog以前：

記住這個x-index的值（假設1100）後能夠着手解決這個問題了！

解決這個問題有幾種方法：

方法一：

　　找到bootstrap.css 方法

　　查找 dropdown-menu 

　　內容以下：

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

　　將其中x-index的值改爲1100（根據具體狀況肯定）保存後從新打開該頁面

　　若是不行就要F12 看看是否優先級被修改。

　　若是你出現了我上圖的樣子那麼第一種方法不適合你啦！由於上圖的element.style{}這個樣式是由

　　js代碼生成的，你也能夠看到圖中2 處的值是被element.style覆蓋的。

　　也不要期望經過  」!important「 的寫法修改由於datepicker 的窗口是經過js生成的頁面自己沒有與之對應的標籤（不過能夠找到該js文件在生成的div後 加上該樣式 ，不過這樣就不如直接使用第二種方法了）。

方法二：

　　找到datepicker的js文件，前面說了這樣式是自動生成的因此咱們找到 bootstrap-datepicker.js(新版名稱應該是 bootstrap-datetimepicker.js)

　　修改生成樣式的代碼：

　　

　　將z-index的值修改爲1100（根據實際狀況修改）

　　而後刷新頁面看看吧。應該是沒問題了，若是還有問題歡迎私信我 咱們一塊兒學習下~