84

这个问题很简单，尽管我很难弄清楚如何解决它。

我正在使用 jQuery-ui 日期选择器以及定制的“ios 样式开/关切换”。此切换使用一些绝对定位的元素，这些元素当前显示在我的日期选择器顶部。

看看下面覆盖 7 月 6 日的丑陋圆圈......

在此处输入图像描述

这样做的肮脏方法（至少是imo）是在我的一个样式表中编写样式，但我更愿意在选择器启动时使用一些javascript来完成这项工作。

我已经试过了

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

和

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

但似乎每次启动日期选择器时 z-index 都会被覆盖。

任何帮助表示赞赏！

4

9 回答 9

146

您在问题中的 JS 代码不起作用，因为 jQuerystyle每次调用它时都会重置 datepicker 小部件的属性。

style覆盖它的一个简单方法z-index是使用另一个答案!important中已经提到的 CSS 规则。另一个答案建议在输入元素本身上设置和，这将自动复制到 Datepicker 小部件。position: relative;z-index

但是，根据要求，如果出于某种原因您确实需要动态设置它，向您的页面添加更多不必要的代码和处理，您可以尝试以下操作：

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

小提琴

我创建了一个延迟函数对象来设置z-index小部件的，在它被 jQuery UI 重置后，每次调用它。它应该足以满足您的需求。

CSS hack 远没有 IMO 丑陋，我在我的 CSS 中保留了一个空间，仅用于 jQuery UI 调整（就在我页面中的 IE6 调整之上）。

于 2012-07-18T05:11:44.493 回答
96

有一种更优雅的方法可以做到这一点。添加这个CSS：

.date_field {position: relative; z-index:100;}

jQuery 会将日历设置z-index为 101（比相应元素多一个）。该position字段必须是absolute,relative或fixed。jQuery 搜索第一个元素的父元素，它是绝对/相对/固定的，并获取它的'z-index

于 2013-07-18T15:25:55.783 回答
21

您需要使用!important子句来强制z-index使用 CSS 的内联值。

.ui-datepicker{z-index: 99 !important};
于 2015-07-27T10:32:51.343 回答
8

当我尝试将 datepicker 与引导模式结合使用时，这对我有用：

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

当然，更改选择器以适合您自己的需要。我将“z-index”设置为 1051，因为引导模式的 z-index 设置为 1050。

于 2016-07-06T18:34:55.190 回答
5

日期选择器现在将弹出 z-index 设置为比其关联字段多一个，以使其保持在该字段的前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z-index 为 0，因此 datepicker 以 1 结束。是否存在无法正确显示 datepicker 的情况？jQuery 论坛帖子

要获得 100 的 z-index。您需要输入，z-index:99;JQueryUI 会将日期选择器更新为z-index:100

<input style="z-index:99;"> 或<input class="high-z-index">和 css .high-z-index { z-index: 99; }

您还可以指定要从对话框继承的 z-index，并让 jQueryUI 正确检测 z-index。

<input style="z-index:inherit;"> 或<input class="inhert-z-index">和 css .inherit-z-index { z-index: inherit; }

于 2015-02-13T19:54:46.533 回答
2

就我而言，没有任何效果。我需要将 z-index 添加到具有 datepicker 的输入类型。

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
于 2019-03-29T16:44:40.330 回答
1

最好的自然方法是简单地将日期选择器元素放在一个“平台”上，该平台具有“相对”位置并且具有比显示在您的控件上方的元素更高的“z-index”......

于 2017-07-01T20:06:15.677 回答
0

这是用于引导日期时间选择器

如果您的日期选择器由于滚动而隐藏在您的 div 使用中：

overflow-x: visible !important;
overflow-y: visible !important;

在包含您的日期选择器和其他项目的整个 div 的 css 中，例如

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}
于 2019-04-02T07:15:38.160 回答
0

添加这个：

    $(document).ready(function()
    {
      $('#datepickers-container').css('z-index', 999999999);
    };
于 2021-11-30T11:26:55.840 回答