bootstrap 3とdatepicker for bootstrapでmodalしたときの問題

Bootstrap 3とDatepicker for Bootstrapを組み合わせて使用し、modalダイアログを作るとdatepickerのポップアップがダイアログの影に隠れる。

以下参照。

issueとして登録されていて、2014年12月にはもう直ったと書いているが、最新版でもダメだった。

DatePicker on modal not displaying #464

 

言った方が良いのかも知らんけど、英語力が無いのと面倒なので言わん。

解決策としては、

.datepicker
{
 z-index:1151 !important;
}

というCSSを書けばよい、と、前述のページで紹介されている。しかしこれだと、modalしていないエリアにdatepickerがあった場合にそのdatepickerがmodalの黒い半透過色の背景を突き抜けて上に出てくるのでよろしくない。

以下のようにdatepicker-dropdown指定だとうまく行った。

.datepicker-dropdown
{
 z-index:1151 !important;
}

以上。ご参考まで。