Question

我有一个幻灯片div，我在div上面有一个datepicker字段。

当我点击datepicker字段时，datepicker面板会显示幻灯片div。

我把脚本放在：

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

所以我无法在CSS中更改datepicker的z-index。脚本生成的datepicker的z-index为1，我的幻灯片div（也称为googleajaxapi）z-index为5.所以我想我必须增加日期选择器的z-index大于5.所以有任何增加它的方法？

有人可以帮助我吗？

Answer 1

将以下样式放在'input'文本元素中：position: relative; z-index: 100000;。

datepicker div从输入中获取z-index，但仅当位置是相对的时才有效。

使用这种方式，您不必修改jQuery UI中的任何javascript。

Answer 2

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

Answer 3

为我工作

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

Answer 4

根据marksyzm的回答，这对我有用：

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

Answer 5

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

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

请注意，您无法省略"position": "relative"规则，因为插件会查看规则或样式表的内联样式，但不是两者。

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

Answer 6

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

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

Answer 7

我有一个使用日期选择器的对话框。它总是被隐藏起来。当我调整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打开的任何对话框上都不会重叠。 / p>

Answer 8

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

Answer 9

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

Answer 10

当我错过主题时，这发生在我身上。确保主题存在，或者重新加载主题，然后将其重新上传到服务器。

Answer 11

这解决了我的问题：

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

Answer 12

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

Answer 13

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

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

使用他们的输入组和表单控件，只需通过父ID，类或我的情况下的引导对话框来应用适用于您的规则。

Answer 14

我不得不

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button class="portfolio-listen">Play</button>

Jquery日期选择器z-index问题

14 个答案: