jqueryのダイアログ上からdatepickerを実行する。

また、jqueryでプチはまりました。

jquery uiのdialogで表示されたダイアログ上にフォームを配置して、
そのフォーム上からデータのやり取りをしようと、パーツを配置していったのですが・・・datepickerを配置してもどうにも表示されない。

firebugでちょっと調べたところ、
モーダルダイアログの背景レイヤーにz-indexの1000、
ダイアログ自体にz-indexの1001が設定されておりました。

datepicker自体にはz-indexの指定が無いため、
必然的に発生元となるダイアログよりも下層のレイヤーとなる為に表示されなかった模様です。

ネット調べてみると、dateickerに指定されているスタイルシートクラス「.ui-datepicker」にz-indexをつけて、非常に大きな値を設定する方法が紹介されていましたが、

私の性分として、その時々で決めた「決めうち数値」のルールは、
後から忘れてしまう事が多いので、あまり使いたく有りません。

なので簡単なスクリプトを書くです。
$('#date-input').datepicker({
  beforeShow: function(input, inst){
    $('#ui-datepicker-div')
      .css(
        'z-index',
        parseInt($($(input).parents('.ui-dialog').get(0)).css('z-index')) + 1
      );
  }
});

日本語で略して書くと
「datepickerが配置されているinputアイテムの上位にあるdialogのz-indexの値を調べて、+1した状態で表示する。」です。

dialogの上からdialogを表示してその上にdatepickerを配置する場合も一応ok。
できない場合は、「parents('.ui-dialog').get(0)」のgetの引数を変えてみるといいかも。
「0」指定で、一つ上のdialogが引っ張って来れるはず。

あと、「css('z-index')」で引っ張ってきた値は文字列なので、数値化する必要がある。