jquery日付ピッカーのz-indexの問題

スライドショーのdivがあり、そのdivの上に日付ピッカーフィールドがあります。

datepickerフィールドをクリックすると、datepickerパネルがスライドショーdivの後ろに表示されます。

そして、私はスクリプトを次のように置きました：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

そのため、CSSで日付ピッカーのz-indexを変更できません。スクリプトが生成している日付ピッカーのz-indexは1で、スライドショーdiv（googleajaxapiでも呼び出す）のz-indexは5です。そのため、日付ピッカーのz-indexを5より大きくする必要があると思います。それを増やす方法はありますか？

誰か助けてもらえますか？

次のスタイルを「input」テキスト要素に配置しますposition: relative; z-index: 100000;。

datepicker divは入力からZインデックスを取得しますが、これは位置が相対的な場合にのみ機能します。

この方法を使用すると、jQuery UIからJavaScriptを変更する必要はありません。

単にあなたのCSSで ' .ui-datepicker{ z-index: 9999 !important;}'を使用してくださいここで9999は、あなたの日付ピッカーを利用可能にしたい任意のレイヤー値に置き換えることができます。コードにコメントを付けたりposition:relative;、入力要素に' ' cssを追加したりしないでください。入力要素のz-indexを増やすと、すべての入力タイプのボタンに影響が及ぶため、場合によっては必要ないことがあります。

私のために働いた

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

markyzm回答に基づいて、これは私のために働きました：

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

ジャスティンの答えに加えて、乱雑なマークアップが心配な場合や、CSSでこの値をハードコード化したくない場合は、表示される前に入力を設定できます。このようなもの：

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

"position": "relative"プラグインは両方のルールまたはスタイルシートではなく両方のインラインスタイルで検索するため、ルールを省略できないことに注意してください。

dialog("widget")ポップアップする実際の日付ピッカーです。

私はクリックで使用してこの問題を解決しました：

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

日付ピッカーを使用するダイアログボックスがあります。それは常に隠されていました。z-indexを調整すると、下のフォームのフィールドがダイアログに常に表示されました。

私は問題を解決するために見たソリューションの組み合わせを使用しました。

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

before showは、選択されたときにdatepickerが常に一番上になるようにしますが、onCloseはフィールドのz-indexが確実にリセットされるようにし、後で別のdatepickerで開かれたダイアログで重複しないようにします。

ここを参照してください：http : //forum.jquery.com/topic/z-index-1-datepicker-1-8

datepickerがdatatables.net tabletoolsボタンの上にあるページがあります。データテーブルボタンのz-indexは、個々の日付ピッカーの日付ボタンよりも高くなっています。Ronyeの回答のおかげで、position：relative;を使用してこの問題を解決できました。Zインデックス：10000。ありがとうございます。

これは私がテーマを逃していたときに起こりました。テーマが存在することを確認するか、テーマを再ダウンロードして、サーバーに再アップロードしてください。

それが私の問題を解決しました：

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

実際、CSSを効果的に追加できますが、ui-datepickerクラスの最後に.ui-datepicker{ z-index: 9999 !important;}変更jquery-ui.cssまたはjquery-ui.min.css追加できますz-index: 9999 !important;。どちらもうまくいきます（必要なのは1つだけです;-)）

私もこの問題を抱えていました。日付ピッカーは入力のz-indexを使用するため、次のcssを追加しました

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

入力グループとフォームコントロールを使用して、親ID、クラス、または私の場合はブートストラップダイアログのいずれかによって、自分に適用されるルールを適用してください。

そうしなければならなかった

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}