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. }  

 修改后：

Html代码   

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

 

可以直接修改datepicker.css文件，我这里使用了bootstrap，所以在bootstrap_and_overrides.css.less中修改也可以

Html代码   

1. @import "twitter/bootstrap/bootstrap";  
2. body { padding-top: 60px; }   
3. .datepicker {  
4. z-index: 9999;  
5. top: 0;  
6. left: 0;  
7. padding: 4px;  
8. margin-top: 1px;  
9. -webkit-border-radius: 4px;  
10. -moz-border-radius: 4px;  
11. border-radius: 4px;  
12. }  
13. @import "twitter/bootstrap/responsive";  

 

That's all!~