在普通的网页中显示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,就可以保证日期控件总
是显示在最前端了
修改前:
- .datepicker {
- top: 0;
- left: 0;
- padding: 4px;
- margin-top: 1px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
修改后: