jQuery UIのDialog(modal)上でDatepickerを使うときの注意

ということを、やってたんだけど。うまくいかない。で、よくよく見てみるとモーダルダイアログの後ろに、カレンダーが表示されていた。ということで、CSS（ui.datepicker.css）を以下のようにすると解決。

.ui-datepicker { width: 17em; padding: .2em .2em 0;}

↓このように変更(z-indexをつける)。

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 2000;}

ちなみに、ui.datepicker.cssはテーマごとに違うので注意。

追記

はじめz-index:1003とかにしてたんだけど、ダイアログを閉じたり開いたりするたび、ダイアログのz-indexも増えていって1003より大きくなり、結局Datepickerがダイアログの後ろに隠れてしまう。とりあえず、ここは2000くらいにして対応。。

追記

NONさんにもコメントいただきましたが、datepickerのオプションでstack:trueとすると上手くいくかも、というのはどうやらそういう仕様にはなっていないようでした。残念。

Dialogのオプションにはstack: true（false）というものがあって(デフォルトはtrue）、複数ダイアログを開いているとき、裏側のダイアログを選択したらそれが表にくるとか来ないとかを設定するものらしい。falseにすると裏側のダイアログを選択してもそれが表に来ることはない。

これを考えたときに、datepickerが裏側に来るのはこのオプションがfalseで設定されている、と予想できる（自分はそこまで考えつかなかったけど）しかし、実際にはdatepickerのstackオプションはなかったみたいで、上手くいかなかったんだけど。

ダイアログでそういう考えがあるんだったらdatepickerにもあって良さそうなのにねぇ。
とは言え、NONさん情報有難うございました。また、ツッコミ入れてくださいw