如何更改 jQuery UI 日期选取器 Z 索引值

Question

我被迫使用旧版本的jquery ui，即1.8.10。此版本中的日期选择器在 z-index 设置中存在一个错误，有时会使其出现在其他控件下。我只是想调整 dp 的 z 索引，使其出现在其他控件的顶部。我试图将 z 索引更改为 .js 文件，但失败了。我读到您必须在 aftershow 事件上设置此值，因为如果该值更早（不确定这是否为真），则该值将被覆盖。以下是 im 如何创建 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 名称"ui-datepicker-div"，并且类应用是"ui-datepicker"。所以我给 css 作为，它对我的工作。

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

Answer 4

看起来日期选取器复制了原始输入元素具有的任何 z 索引值。我可以想到两种方法来解决这个问题：

非 JS只需将z-index:1051;添加到输入元素的样式属性中即可。这是基于引导.modal类使用 z 索引 1050 的观察结果。

使用 JS 的动态解决方案声明日期选取器时，添加一个 beforeShow 处理程序，用于检索 .modal 的 z 索引，并将日期选取器的 z 索引设置为大于此值的 1：

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

Answer 5

使用它来设置日期选择器 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

当用户单击用于控制日期选择器的文本框时，我调用了此函数

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

效果很好

-米