jQuery日期选择器Z-index问题

我有一个幻灯片div，并且该div上方有一个datepicker字段。

当我单击“日期选择器”字段时，日期选择器面板显示在幻灯片div的后面。

我把脚本写成：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

所以我不能在CSS中更改datepicker的z-index。脚本正在生成的datepicker的z索引是1，我的幻灯片div（也通过googleajaxapi调用）z索引是5。所以我想我必须将日期选择器的z索引增加到大于5。有什么办法增加吗？

有人可以帮我吗？

将以下样式放在“输入”文本元素上：position: relative; z-index: 100000;。

datepicker div从输入中获取z索引，但这仅在位置相对时才有效。

使用这种方式，您无需从jQuery UI修改任何JavaScript。

只需在CSS中使用' .ui-datepicker{ z-index: 9999 !important;}'，即可将9999替换为您希望日期选择器可用的任何图层值。既不注释任何代码，也不position:relative;在输入元素上添加' 'CSS。因为增加输​​入元素的z索引会影响所有输入类型的按钮，所以在某些情况下可能不需要。

为我工作

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

基于marksyzm答案，这对我有用：

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

添加到贾斯汀的答案中，如果您担心标记不整洁，或者您不希望在CSS中使用硬编码此值，则可以在显示输入之前进行设置。像这样：

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

请注意，您不能忽略该"position": "relative"规则，因为该插件在两种规则或样式表中都以内联样式显示，但不是两者都以。

这dialog("widget")是实际弹出的日期选择器。

我通过单击使用解决了这个问题：

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

我有一个使用日期选择器的对话框。它始终是隐藏的。当我调整z-index时，下部窗体上的字段始终显示在对话框中。

我使用了解决问题的综合解决方案。

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

之前的显示确保选择时datepicker始终位于最上面，但是onClose确保重置该字段的z-index，以使其在以后使用其他datepicker打开的任何对话框中不重叠。

看到这里：http : //forum.jquery.com/topic/z-index-1-datepicker-1-8

我有一个页面，其中的日期选择器位于datatables.net tabletools按钮的顶部。数据表按钮的z-index值高于单个日期选择器日期按钮。感谢Ronye的回答，我能够通过使用position：relative;来解决此问题。和z-index：10000。谢谢！

当我错过主题时，这发生在我身上。确保该主题存在，或者可能重新定义主题，然后将其重新上传到您的服务器。

那解决了我的问题：

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

实际上，您可以有效地添加CSS，.ui-datepicker{ z-index: 9999 !important;}但是可以在ui-datepicker类的末尾进行修改jquery-ui.css或jquery-ui.min.css添加z-index: 9999 !important;。这两件事对我都有效（您只需要一个；-）

我也有这个问题，因为datepicker使用输入的z-index，所以我添加了以下CSS

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

只需使用适用于您的规则，即可使用父ID，类，或者在我的情况下是引导对话框，使用它们的输入组和表单控件。

我不得不

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}