微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

bootstrap datepicker 在bootstrap modal中不显示问题



在普通的网页中显示datepicker比较简单,将bootstrap-datepicker-zh_CN.js 和 bootstrap-datepicker.css

拷贝到rails工程中相应的assets目录中,并在application.js 和 application.css文件中加载这两个文件

//= require bootstrap-datepicker-zh_CN

 *= require bootstrap-datepicker

最后在 在指定的文本域中加入事件即可$("#dp1,#dp2,#dp3").datepicker()



 

在使用bootstrap modal的时候,把表单的内容放在了modal中,但是日期控件的显示总是在最底层

解决办法:在.datepicker 中加上z-index的控制,css中z-index是用来控制预算的堆叠顺序的,认是auto

也就是说通过它可以设置datepicker控件的堆叠顺序,这里把z-index设置为 9999,就可以保证日期控件总

显示在最前端了

 

修改前:

HTML代码   

收藏代码

  1. .datepicker {   
  2. top: 0;   
  3. left: 0;   
  4. padding: 4px;   
  5. margin-top: 1px;   
  6. -webkit-border-radius: 4px;   
  7. -moz-border-radius: 4px;   
  8. border-radius: 4px;   
  9. }  

 修改后:

相关推荐