bootstrap-datepicker的使用

转载自:http://michael-roshen.iteye.com/blog/1779541

在普通的网页中显示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; 
}

 修改后:

.datepicker {
z-index: 9999;
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

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

@import "twitter/bootstrap/bootstrap";
body { padding-top: 60px; } 
.datepicker {
z-index: 9999;
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
@import "twitter/bootstrap/responsive";

That's all!~


另外一位网友提供的解决方案,如果上面的不好用,可以试试这个:


可以通过在 input  输入框之外 嵌套<span style="position: relative; z-index: 9999;">完美解决问题。

posted @ 2016-03-22 18:51  花语苑  阅读(1931)  评论(0编辑  收藏  举报