8

1.8.10である古いバージョンのjqueryuiを使用することを余儀なくされています。このバージョンの日付ピッカーには、z-index設定内にバグがあり、他のコントロールの下に表示されることがありました。他のコントロールの上に表示されるように、dpのz-indexを調整したいだけです。z-indexを.jsファイルに変更しようとしましたが、失敗しました。値が以前の場合は上書きされるため、aftershowイベントでこの値を設定する必要があることを読みました（これがtrueかどうかはわかりません）。これは、imがdpのインスタンスを作成する方法の例です...私はまた、日付ピッカーにタイムピッカーをアタッチしました。

        $(function () {
        $("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5
        });
        $("#dpimage6").click(function () {
            $("input[id$='txtPreviousCutOff']").datepicker("show")
        });
    });
4

7 に答える 7

6 
.ui-datepicker-div { z-index: 999999; }

またはjsで：

$(function () {
    $("input[id$='txtPreviousCutOff']").datetimepicker({
        timeFormat: "hh:mm tt",
        stepMinute: 5
     });
     $("#dpimage6").click(function () {
        $("input[id$='txtPreviousCutOff']").datepicker("show")
    });
    $('.ui-datepicker-div').css('zIndex', 999999);
});
于 2012-12-11T16:32:11.300 に答える
5

ui-widget-content クラスにスタイルを適用する必要があります

.ui-widget-content
{
    z-index: 100; 
}

クラスをより具体的に追加して、UI styles

#datepicker.ui-widget-content {}
于 2012-12-11T16:34:59.520 に答える
4

このコードは私のために働いています。日付ピッカーのdiv名が「ui-datepicker-div」で、適用されるクラスが「ui-datepicker」であるとします。だから私はcssを、私のための仕事として与えます。

#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }
于 2014-06-20T14:39:13.013 に答える
2

datepickerは、元の入力要素が持つz-index値をコピーするように見えます。私はこれを解決する2つの方法を考えることができます：

非JSz-index:1051;入力要素のstyle属性に 追加するだけです。.modalこれは、ブートストラップクラスが1050のz-indexを使用するという観察に基づいています。

JSを使用した動的ソリューション datepickerを宣言するときに、のz-indexを取得し、.modaldatepickerのz-indexをそれより1大きい値に設定するbeforeShowハ​​ンドラーを追加します。

datepicker({beforeShow: function(inputElem, inst) {
          var zi = Number($(inputElem).closest('.modal').css('z-index'));
          $(inputElem).css('z-index',zi+1);
          }});
于 2014-01-10T02:47:13.407 に答える
1

これを使用して、datepicker z-indexを設定します:(テストされていませんが、機能するはずです）

$("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5,
            beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); }
        });
于 2012-12-11T16:37:53.253 に答える
0

CSSを変更するだけです。

前と同じようにこれを行います：

/* Original */
.ui-datepicker { width: 17em; padding: .2em .2em 0 }
/* Modify */
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999 !important; }

追加することを忘れないでください!Important。

これは、によって追加されるインラインスタイルを上書きしますjavascript。

これがうまくいくことを願っています:)

ハッピーコーディング

于 2014-09-21T07:32:09.590 に答える
0

日付ピッカーを制御するために使用されるテキストボックスをユーザーがクリックしたときに、この関数を呼び出しました

function textboxWhenClicked(){
  $("#textboxid").datepicker();
  $("#ui-datepicker-div").css("z-index", 999999);
}

うまくいきました

-M

于 2017-07-28T02:59:17.527 に答える