BootstrapのモーダルでjQueryUIのDatepickerのz-index問題を解消する小技

モーダル中の入力フォームでDatepickerを使う際に、Datepikcerがモーダルの後ろに隠れてしまう問題を解消したい。

この問題の原因はDatepikcerに指定されているz-indexの値がモーダルのz-indexより小さい値で設定されていることが原因。この問題の解消手段は幾つかある。

今まではこうだった。

この問題お決まりの解消方法となっているので今更書くべきことではないが、以下の様なCSSを付与して解消する。

.ui-datepicker { z-index: xxx(数値) !important; }

CSSでz-indexを大きな値で固定する。これで解消可能なら手っ取り早いが、モーダルのz-indexが変化したりすることもあって調整が難しかったりする。

そうだ。z-indexは動的に設定させよう。

JSを使って動的にz-indexを指定させる処理にする

というわけで動的にする処理をさくっと書く。

$('input.datepicker').datepicker({
    beforeShow: function(input, inst){
        setTimeout(function(){
            $('#ui-datepicker-div')
            .css(
                'z-index',
                String(parseInt($(input).parents('.modal').css('z-index'),10) + 1)
            );
        },0);
    }
});

何をしているかというと、選択されたinputのz-indexを取得してそれを+1した値をDatepikcerのz-indexとして与えている。いちいちz-indexの値を考えなくても良くなるのでシンプルです。

思う所

setTimeoutにCSSの!importantと同じ役目をさせているのがちょっと気持ち悪いが、cssTextで!importantを設定するとそれまで設定されたスタイルを捨ててしまう。

捨ててしまうスタイルを再設定するのがめんどくさいのでsetTimeoutで回避しているのがちょっとモヤモヤ_(:3」∠)_