这个问题很简单，尽管我很难弄清楚如何解决它。
我正在使用jQuery-ui datepicker以及自定义的“ 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都会被覆盖。
任何帮助表示赞赏！
style头部中的标签与我正在寻找的标签有点接近，但是我真正想要做的是更改date-picker元素上的style属性。
=]
Answers:
您问题中的JS代码不起作用，因为jQuerystyle每次调用时都会重置datepicker小部件的属性。
一个简单的方法来覆盖它style的z-index是与!important前面已经提到的CSS规则另一种答案。另一个答案建议在输入元素本身上设置position: relative;和z-index，并将其自动复制到Datepicker小部件中。
但是，根据要求，如果出于任何原因您确实需要动态设置它，向页面添加更多不必要的代码并进行处理，则可以尝试以下操作：
$('.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调整之上）。
;)
z-index为输入DOM。那是唯一对我<input .... style="z-index: 9999;"/>
有一种更优雅的方法。添加此CSS：
.date_field {position: relative; z-index:100;}
jQuery会将日历设置z-index为101（比相应元素大一）。该position字段必须是absolute，relative或fixed。jQuery搜索第一个元素的父元素，它是绝对的/相对的/固定的，并采用其“z-index
您需要使用!important子句来z-index使用CSS强制插入值。
.ui-datepicker{z-index: 99 !important};
当我尝试将datepicker与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，因为引导模态的z-index设置为1050。
现在，日期选择器将弹出的z-index设置为其关联字段多一个，以使其保持在该字段的前面，即使该字段本身在弹出对话框中也是如此。默认情况下，z索引为0，因此datepicker最终以1结尾。是否存在未正确显示datepicker的情况？jQuery论坛帖子
要获得100的z-index。您需要输入，z-index:99;并且JQueryUI会将datepicker更新为z-index:100
<input style="z-index:99;"> 或<input class="high-z-index">和CSS .high-z-index { z-index: 99; }
您还可以指定要继承的z-index，该z-index应该从对话框继承并导致jQueryUI正确检测到z-index。
<input style="z-index:inherit;"> 或<input class="inhert-z-index">和CSS .inherit-z-index { z-index: inherit; }
这是用于Bootstrap datetimepicker
如果您的日期选择器由于滚动而隐藏，则在div中使用：
overflow-x: visible !important;
overflow-y: visible !important;
在整个div的CSS中，其中包含您的日期选择器和其他项，例如
.dialogModel{
overflow-x: visible !important;
overflow-y: visible !important;
}
style在其头部添加标签-不仅在CSS中使用它可以使您的JS代码更短，更整洁，而且可以无缝地应用于所有日期选择器实例。