关于DatePicker在模态窗体下失效的问题

时间:2023-03-08 23:54:42
关于DatePicker在模态窗体下失效的问题

最近用bootstrap做了一个租赁相关的管理系统,由于前端知识薄弱,也是编查资料边做。关于一些控件的用法,也是从网上查资料。下面,来说一下在写前端页面时遇到的几个坑。

这个系统中,日期控件用的是DatePicker,感觉还不错。但是在BootStrap模态窗体下,DatePicker失去了作用,无法显示日期选择框,起初我以为是控件初始化出了问题。经过一番折腾,也查了一下资料,在知道,原来DatePicker插件被模态框遮住了,这是css的层模型产生的原因。那么知道原因就好解决了,使用z-index属性将日历插件浮在页面的最上面就可以啦。z-index设置的越大,越在页面最上面显示,才不会被遮住。

极限一点,我将z-index属性设成了9999

<span style="position: relative; z-index: 9999;">
          <input type="text" class="form-control date-picker" value="2016/11/11" id="start_date" name="start"/>
</span>

这样问题就解决了