Question

我被迫使用旧版本的jquery ui，即1.8.10。此版本中的日期选择器在z-index设置中有一个错误，有时会使其出现在其他控件下。我只是想调整dp的z-index，使其显示在其他控件的顶部。我试图将z-index更改为.js文件，但失败了。我读过你必须在aftershow事件上设置这个值，因为如果它的早期值将被覆盖（不确定这是否为真）。以下是如何创建dp实例的示例...我还将时间戳附加到日期选择器。

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

Answer 1

.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);
});

Answer 2

您需要将样式应用于ui-widget-content类

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

确保为该课程添加更好的特异性，以便它覆盖UI styles

#datepicker.ui-widget-content {}

Answer 3

这段代码对我有用。假设我有日期选择器div名称＆＃34; ui-datepicker-div＆＃34;并且适用的类是＆＃34; ui-datepicker＆＃34;。所以我把css作为它的工作给我。

#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }

Answer 4

看起来像datepicker会复制原始输入元素所具有的z-index值。我可以想出两种方法来解决这个问题：

<强>非JS 只需将z-index:1051;添加到input元素的style属性即可。这是基于bootstrap .modal类使用1050的z-index的观察结果。

使用JS的动态解决方案 在声明你的日期选择器时，添加一个beforeShow处理程序，它检索.modal的z-index并将datepicker的z-index设置为高于1：

datepicker({beforeShow: function(inputElem, inst) {
          var zi = Number($(inputElem).closest('.modal').css('z-index'));
          $(inputElem).css('z-index',zi+1);
          }});

Answer 5

使用它来设置你的datepicker z-index :(未测试但应该有效）

$("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5,
            beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); }
        });

Answer 6

只需更改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添加的任何内联样式。

希望这会工作:)

快乐编码

Answer 7

当用户点击用于控制datepicker的文本框

时，我调用了此函数

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

工作得很好

-M

如何更改jQuery UI Datepicker Z-Index值？

7 个答案: