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（根据实际状况修改）

　　而后刷新页面看看吧。应该是没问题了，若是还有问题欢迎私信我 咱们一块儿学习下~