如何更改jQuery UI日期选择器的Z-Index值？

Question

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

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

- user1732364

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

- Magicmarkker

---

我使用了这个方法，目前它正在运行！虽然所有三个答案都很好，但我希望能够检查它们全部 :) - user1732364

我不得不使用 #ui-datepicker-div 来指定元素的ID（在我们的jQuery版本中，它们都具有相同的名称）。 - Stephen O'Flynn

这有点hacky，因为可能会有一个由bootstrap创建的.modal，它具有z-index: 1050。我建议不要同时/在同一页/整个项目中混合使用jquery-ui和bootstrap。但是切换到一种独占模式以避免这种干扰。 - Roland

确实可能存在这种情况，但原始问题没有提到或将其作为问题提出，因此我根据我所拥有的信息进行了回答。 - Magicmarkker

Answer 2

您需要对ui-widget-content类应用样式。

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

请确保使用具有更好的特异性的类，以便覆盖UI样式

#datepicker.ui-widget-content {}

- Sushanth --

Answer 3

这段代码对我有效。假设我的日期选择器 div 名称为 "ui-datepicker-div"，应用类别为 "ui-datepicker"。我给出的 css 是这样的，它对我有效。

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

- Ajay2707

Answer 4

看起来日期选择器会复制原始输入元素的z-index值。我可以想到两种解决方法：

非JS方式 只需在输入元素的样式属性中添加z-index:1051;。这是基于观察到bootstrap .modal类使用了z-index 1050。

使用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);
          }});

- lastoneisbearfood

---

请勿同时使用BS2/3和jquery-ui，而是选择其中一个专用。 - Roland

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

- A. Wolff

---

我认为这个解决方案应该可以工作，但这完全取决于jQuery的版本（也许）。在1.9中，我正在使用的版本中，这不起作用，因为在显示日期选择器的函数之前，"_showDatepicker"被调用，在其中它设置了日期选择器的z-index，覆盖了我们在beforeShow中设置的z-index。没有检查其他版本。 - hjbolide

Answer 6

当用户点击用于控制日期选择器的文本框时，我调用了这个函数。

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

非常好用

-M

- tuberider

Answer 7

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

希望这能够起作用 :)

编程愉快。

- Mohan D Kishore