jquery-ui datepicker changez-index

私はそれを解決する方法を理解するのに苦労していますが、問題はかなり簡単です。

カスタムメイドの「iosスタイルのオン/オフトグル」と一緒にjQuery-uidatepickerを使用しています。このトグルは、現在私の日付ピッカーの上に表示されているいくつかの絶対位置の要素を使用します。

以下の7月6日をカバーする醜い円を参照してください...

これを行うための汚い方法（少なくともimo）は、スタイルシートの1つにスタイルを書き込むことですが、これを行うためにピッカーが起動するときにJavaScriptを使用したいと思います。

私はすでに試しました

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

そして

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

しかし、日付ピッカーが起動されるたびにz-indexが上書きされるようです。

どんな助けでも大歓迎です！

jQuerystyleは、datepickerウィジェットを呼び出すたびにその属性をリセットするため、質問のJSコードは機能しません。

style'をオーバーライドする簡単な方法z-indexは!important、別の回答ですでに述べたように、CSSルールを使用することです。さらに別の答えは、Datepickerウィジェットに自動的にコピーされる入力要素自体の設定position: relative;と設定を提案z-indexしています。

ただし、要求に応じて、何らかの理由で実際に動的に設定し、不要なコードを追加してページに処理する必要がある場合は、次のことを試すことができます。

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

フィドル

z-indexウィジェットを呼び出すたびに、jQuery UIによってリセットされた後、ウィジェットのを設定するための遅延関数オブジェクトを作成しました。それはあなたのニーズで十分なはずです。

CSSハックははるかに醜いIMOではありません。私はCSSにjQueryUIの調整用のスペースを予約しています（これは私のページのIE6の調整のすぐ上です）。

それを行うためのよりエレガントな方法があります。このCSSを追加します。

.date_field {position: relative; z-index:100;}

jQueryはカレンダーz-indexを101（対応する要素より1つ多い）に設定します。positionフィールドがなければなりませんabsolute、relativeまたはfixed。jQueryは、絶対/相対/固定である最初の要素の親を検索し、その親を取得します。z-index

CSSを使用して!importantインラインz-index値を強制するには、句を使用する必要があります。

.ui-datepicker{z-index: 99 !important};

これは、datepickerをブートストラップモーダルと組み合わせて使用​​しようとしたときに機能しました。

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

もちろん、自分のニーズに合わせてセレクターを変更してください。ブートストラップモーダルのz-indexが1050に設定されているため、「z-index」を1051に設定しました。

datepickerは、ポップアップz-indexを関連するフィールドより1つ多く設定し、そのフィールド自体がポップアップダイアログにある場合でも、そのフィールドの前に保持するようになりました。デフォルトでは、z-indexは0であるため、datepickerは1になります。これがdatepickerを正しく表示しない場合はありますか？JQueryフォーラムの投稿

100のz-indexを取得するには。を入力する必要があり、z-index:99;JQueryUIは日付ピッカーを次のように更新しますz-index:100

<input style="z-index:99;"> または<input class="high-z-index">およびcss .high-z-index { z-index: 99; }

ダイアログボックスから継承するz-indexを指定して、jQueryUIにz-indexを適切に検出させることもできます。

<input style="z-index:inherit;"> または<input class="inhert-z-index">およびcss .inherit-z-index { z-index: inherit; }

最良の自然な方法は、日付ピッカー要素を、「相対」位置を持ち、コントロールの上に表示されている要素よりも高い「z-index」を持つ「プラットフォーム」に配置することです...

私の場合、何も機能しませんでした。日付ピッカーのある入力タイプにz-indexを追加する必要がありました。

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

これはBootstrapdatetimepicker用です

スクロールがdivに表示されるために日付ピッカーが非表示になっている場合は、次を使用します。

overflow-x: visible !important;
overflow-y: visible !important;

日付ピッカーやその他のアイテムを含むdiv全体のCSS

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}