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;">完美解決問題。