8

我被迫使用 1.8.10 的旧版本的 jquery ui。此版本中的日期选择器在 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")
        });
    });
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 as ，它为我工作。

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

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

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

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

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 回答