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

Question

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

        $(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 {}