jQuery-UI日期选择器更改z-index

Question

问题很简单，尽管我很难弄清楚如何解决它。我正在使用jQuery-ui日期选择器和自定义制作的“ios风格开关”。该开关使用一些绝对定位的元素，这些元素目前显示在我的日期选择器上方。请参见下面覆盖7月6日的丑陋圆圈...

我认为这种做法很不规范，但可以在我的样式表中编写一个样式来实现它。但是当选择器启动时，我更愿意使用一些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都会被覆盖。任何帮助将不胜感激！

- Greg Guida

---

我认为在你的页面CSS中使用!important规则比使用JavaScript更加简洁，因为z-index是CSS属性，而且用于样式设计。如果我必须使用JS来解决问题，那么我会将一个“style”标签添加到头部 - 不仅将其放在CSS中使你的JS代码更短、更干净，而且也能够无缝应用到所有日期选择器实例上。 - Fabrício Matté

可能是 https://dev59.com/jHRB5IYBdhLWcg3wHkPi 的重复问题。 - Lance

@Lance 不是重复问题，因为我正在询问如何在不添加CSS行的情况下动态完成它。 - Greg Guida

@FabrícioMatté，我想我只是不想用一些愚蠢的覆盖来搞乱我的CSS，以解决jquery-ui边缘情况。头部的style标签更接近我想要的，但我真正想做的是改变日期选择器元素上的样式属性。 - Greg Guida

我在每个项目开始时都会在CSS文件底部预留一个空间，专门用于jQuery UI的hack。但是，我还是提交了一个纯jQuery解决方案的答案，解释了为什么CSS会是一个更清晰的解决方案，现在你可以选择使用哪一个。=] - Fabrício Matté

这里有解决方案： https://dev59.com/EWw05IYBdhLWcg3wxkur - Rafał Wójcik

Answer 1

你在问题中的JS代码无法工作，因为每次调用它时，jQuery都会重置日期选择器微件的

- Fabrício Matté

---

我可以告诉你，你有多么棒吗？在尝试了许多其他事情之后，谢谢你！ - Bretticus

谢谢您的回答，它有效了。但是一旦刷新日期选择器（例如更改月份），z-index 就会恢复默认值，所以我认为这个答案需要做出一些小调整，即添加以下内容 onChangeMonthYear：function() { setTimeout(function(){ $('.ui-datepicker').css('z-index'，99999999999999); }，0); } - Gombo

@Gombo 我认为如果你使用其中一种CSS方法（在JS方法上面描述），会更容易，因为它们要少得多的hackish。 ;) - Fabrício Matté

至少在FF中，最大数字长度为10位，因此九个9可能更好（尽管FF可以在不出错的情况下转换为2147483647）。 - Campbeln

+1 表示指出要将 z-index 设置为输入 DOM。这是唯一对我有效的方法：<input .... style="z-index: 9999;"/>。 - Sebastian

这是一个非常糟糕的做法。 - Dávid Florek

Answer 2

有一种更优雅的方法来做这件事。增加这个 CSS：

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

jQuery将把日历的z-index设置为101(比相应元素多一个)。 position字段必须为absolute,relative或fixed。 jQuery搜索第一个元素的父级，它的定位类型是absolute/relative/fixed，并取其z-index

- Marek Roj

---

这绝对是最好的解决方案。+1 - Paul Chamberlain

运行得非常好！谢谢。 - brando

完美，但在我的情况下：.datepicker-dropdown {z-index:999999 !important;} - ujjaval

几乎完美，但如果您不知道要求日期选择器强制执行的zindex的最大值，则无法正常工作。 - MFAL

Answer 3

您需要使用CSS中的!important关键字来强制使用行内z-index值。

.ui-datepicker{z-index: 99 !important};

- Emanuele Greco

---

抱歉对我不起作用 - z-index 在元素上由 jQuery 设置，它比 !important 优先级更高。 - Dylan Hamilton-Foster

@DylanHamilton-Foster 你确定吗？能否请再添加一些其他的标签，例如BackgroundColor，以便查看样式是否真正应用？ - Emanuele Greco

Answer 4

当我尝试在Bootstrap模态框中使用日期选择器时，以下方法对我有用：

$('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，因为bootstrap模态框的z-index设置为1050。

- David Hicks

Answer 5

日期选择器现在将弹出窗口的 z-index 设置为比其关联字段高一级，以使其保持在该字段的前面，即使该字段本身位于弹出对话框中也是如此。默认情况下，z-index 为 0，因此 datepicker 最终为 1。是否存在无法正确显示日期选择器的情况？JQuery论坛帖子 要获得 z-index 为 100。您需要一个具有 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; }

- Loren

Answer 6

在我的情况下，没有任何作用。 我需要将z-index添加到具有日期选择器的输入类型中。

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

- Francisco G

Answer 7

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

- clinton

---

请添加有意义的代码并更详细地描述您的“最佳自然方式”。 - Peter

Answer 8

添加这个：

    $(document).ready(function()
    {
      $('#datepickers-container').css('z-index', 999999999);
    };

- Lahiru

Answer 9

这是针对Bootstrap日期选择器的

如果您的日期选择器因为滚动条出现在您的div中而被隐藏，请使用以下代码：

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

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

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}

- shubham kumar