BootStrapでモーダルウィンドウ上にDataPickerが表示されない

jqueryUIのdatepickerがなぜかmodalの外に出すと動くのにmodalの中に入れると表示されない。
コードはちゃんと正しいはずなのに、と色々ハマってしまった。

結果的にはz-indexの関係で表示されないっぽい。
<style>
.datepicker{z-index: 1151 !important; position: absolute;}
</style>
みたいにstyleを設定しないと駄目。

ただこれでもinlineで表示させようとするとサイズ計算がうまくいかないようでバグります。
height指定でもやるか、そもそも使わないほうがいいかも。

どれかを自作したほうが無難かなあ。
てかHTML5ならそもそもtype="date"ってのがあるということに気づいた。
わざわざdatepickerとかtimepickerなんて使う必要ないですな。

しっかしbootstrapとjqueryUIは相性があまり良くないのかもしれないですね。
jqueryのdatepickerはonchangeが拾えるのにbootstrapのdatepickerってそもそもonchangeが拾えなかったりするし。

Author Info(オガティ

エンジニアとして勤め、インフラ周りの開発を経た後Web業界へ異動。
プライベートでもブログ「ogatism」の運営や電子書籍の執筆、占星術師としての活動など幅広い分野で活動中。
詳細はこちら

占い鑑定レポート作成サービス受付中

◆ ogatismをFeedlyに登録 ◆
follow us in feedly