如何更改 jQuery UI Datepicker Z-Index 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13824355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change jQuery UI Datepicker Z-Index value?
提问by user1732364
I am forced to use an older version of jquery ui which is 1.8.10. The datepicker in this version had a bug inside of the z-index setting which at times made it appear under other controls. I am simply wanting to adjust the z-index of the dp so that it appears on top of the other controls. I attempted to change the z-index into the .js file but that failed. I'v read you have to set this value on the aftershow event because the value will get overwritten if its earlier(not sure if this is true). Here is an example of how im creating an instance of the dp...i also attached a timepicker to the datepicker.
我被迫使用旧版本的 jquery ui，即 1.8.10。此版本中的日期选择器在 z-index 设置中有一个错误，有时会使其出现在其他控件下。我只是想调整 dp 的 z-index，使其出现在其他控件的顶部。我试图将 z-index 更改为 .js 文件，但失败了。我读过你必须在 aftershow 事件上设置这个值，因为如果它更早，该值将被覆盖（不确定这是否属实）。这是我如何创建 dp 实例的示例...我还将时间选择器附加到日期选择器。
$(function () {
$("input[id$='txtPreviousCutOff']").datetimepicker({
timeFormat: "hh:mm tt",
stepMinute: 5
});
$("#dpimage6").click(function () {
$("input[id$='txtPreviousCutOff']").datepicker("show")
});
});
采纳答案by Magicmarkker
.ui-datepicker-div { z-index: 999999; }
or with js:
或使用 js：
$(function () {
$("input[id$='txtPreviousCutOff']").datetimepicker({
timeFormat: "hh:mm tt",
stepMinute: 5
});
$("#dpimage6").click(function () {
$("input[id$='txtPreviousCutOff']").datepicker("show")
});
$('.ui-datepicker-div').css('zIndex', 999999);
});
回答by Sushanth --
You would need to apply styles to the ui-widget-contentclass
您需要将样式应用于ui-widget-content类
.ui-widget-content
{
z-index: 100;
}
Make sure to have the class added with better specificityso that it overrides the UI styles
确保添加具有更好特异性的类，以便它覆盖UI styles
#datepicker.ui-widget-content {}
回答by Ajay2707
This code is working for me. Suppose I have date-picker div name "ui-datepicker-div" and the class apply is "ui-datepicker". So I give the css as , its work for me.
这段代码对我有用。假设我有日期选择器 div 名称“ui-datepicker-div”，并且应用的类是“ui-datepicker”。所以我给 css as ，它对我有用。
#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }
回答by lastoneisbearfood
Looks like datepicker copies whatever z-index value your original input element has. I can think of 2 ways to solve this:
看起来 datepicker 复制了原始输入元素具有的任何 z-index 值。我可以想到两种方法来解决这个问题：
Non-JSJust add z-index:1051;to the style attribute of your input element. This is based on the observation that bootstrap .modalclass uses a z-index of 1050.
非 JS只需添加z-index:1051;到 input 元素的 style 属性。这是基于观察到引导.modal类使用 1050 的 z-index。
Dynamic solution using JSWhen declaring your datepicker, add a beforeShow handler that retrieves the z-index of .modaland set datepicker's z-index to 1 higher than that:
使用 JS 的动态解决方案在声明您的日期选择器时，添加一个 beforeShow 处理程序，该处理程序检索的 z-index 并将 datepicker 的 z-index.modal设置为高于该值的 1：
datepicker({beforeShow: function(inputElem, inst) {
var zi = Number($(inputElem).closest('.modal').css('z-index'));
$(inputElem).css('z-index',zi+1);
}});
回答by A. Wolff
Use this to set your datepicker z-index: (not tested but should work)
使用它来设置您的日期选择器 z-index :（未测试但应该可以工作）
$("input[id$='txtPreviousCutOff']").datetimepicker({
timeFormat: "hh:mm tt",
stepMinute: 5,
beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); }
});
回答by Mohan D Kishore
Simply change the CSS:
只需更改 CSS：
As before do this:
像以前一样这样做：
/* Original */
.ui-datepicker { width: 17em; padding: .2em .2em 0 }
/* Modify */
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999 !important; }
Dont Forget to Add !Important.
不要忘记添加!Important。
This overrides any inline styling which is added by the javascript.
这将覆盖由javascript.
hope this Will Work :)
希望这会奏效:)
Happy Coding
快乐编码
回答by tuberider
I called this function when user clicks in the textbox used to control the datepicker
当用户单击用于控制日期选择器的文本框时，我调用了此函数
function textboxWhenClicked(){
$("#textboxid").datepicker();
$("#ui-datepicker-div").css("z-index", 999999);
}
Worked great
工作得很好
-M
-M
