blocks|key|812161|text|将以下样式放在“input”文本元素中：position:+relative;+z-index:+100000;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|812162|datepicker+div从输入中获取z索引，但只有在位置是相对的情况下才有效。|812163|使用这种方式，您不需要修改jQuery+UI中的任何javascript。|812164|entityMap^0|K|10|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

Put the following style at the 'input' text element: <code>position: relative; z-index: 100000;</code>. 

The datepicker div takes the z-index from the input, but this works only if the position is relative.

Using this way you don't have to modify any javascript from jQuery UI.

blocks|key|812331|text|只需在你的css中使用'.ui-datepicker{+z-index:+9999+!important;}‘，9999就可以被替换为你想要的日期选择器可用的任何层值。任何代码都不会被注释，也不会在输入元素上添加'position:relative;‘css。因为增加输入元素的z索引将对所有输入类型按钮产生影响，这在某些情况下可能不需要。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|812332|entityMap^0|C|16|2Z|I|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

simply in your css use '<code>.ui-datepicker{ z-index: 9999 !important;}</code>' Here 9999 can be replaced to whatever layer value you want your datepicker available. Neither any code is to be commented nor adding '<code>position:relative;</code>' css on input elements. Because increasing the z-index of input elements will have effect on all input type buttons, which may not be needed for some cases.

blocks|key|596949|text|对我很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|596950|.hasDatepicker+{
++++position:+relative;
++++z-index:+9999;
}|code-block|syntax|javascript|596951|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

worked for me

<pre><code>.hasDatepicker {
 position: relative;
 z-index: 9999;
}
</code></pre>

blocks|key|812353|text|基于marksyzm答案，这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|812354|$('input').datepicker({
++++beforeShow:function(input)+{
++++++++$(input).css({
++++++++++++"position":+"relative",
++++++++++++"z-index":+999999
++++++++});
++++}
});|code-block|syntax|javascript|812355|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Based in marksyzm answer, this worked for me:

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

blocks|key|597199|text|我有一个使用datepicker的对话框。它一直都是隐藏的。当我调整z-index时，下部窗体上的字段总是显示在对话框中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|597200|我使用了我看到的解决方案的组合来解决问题。|597201|$('.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++}+);+}++++++++++++++++++++
++++++++++++});|code-block|syntax|javascript|597202|before显示确保datepicker在被选中时始终在顶部，但是onClose确保字段的z索引被重置，这样它就不会在以后用不同的datepicker打开的任何对话框上重叠。|597203|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I have a dialog box that uses the datepicker on it. It was always hidden. When I adjusted the z-index, the field on the lower form always showed up on the dialog. 

I used a combination of solutions that I saw to resolve the issue.

<pre><code>$('.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 } ); } 
 });
</code></pre>

The before show ensures that datepicker always is on top when selected, but the onClose ensures that the z-index of the field gets reset so that it doesn't overlap on any dialogs opened later with a different datepicker.

blocks|key|812392|text|我通过点击解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|812393|var+checkin+=+$('.dpd1').datepicker()
.on('click',+function+(ev)+{
++++++++$('.datepicker').css("z-index",+"999999999");
}).data('datepicker');|code-block|syntax|javascript|812394|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had this issue i solved by using on click:

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

blocks|key|596700|text|查看此处：http://forum.jquery.com/topic/z-index-1-datepicker-1-8|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|596701|entityMap|0|LINK|mutability|MUTABLE|url|http://forum.jquery.com/topic/z-index-1-datepicker-1-8^0|5|1I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

See here: <a href="http://forum.jquery.com/topic/z-index-1-datepicker-1-8" rel="nofollow">http://forum.jquery.com/topic/z-index-1-datepicker-1-8</a>

blocks|key|596807|text|我有一个页面，日期选择器在datatables.net表格工具按钮的顶部。datatables按钮的z索引高于单独的datepicker+date按钮。多亏了Ronye的回答，我能够通过使用position:+relative和z-index:+10000来解决这个问题。谢谢!|type|unstyled|depth|inlineStyleRanges|entityRanges|data|596808|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I have a page where the datepicker was on top of a datatables.net tabletools button. 
The datatables buttons had a higher z-index than the individual datepicker date buttons. 
Thanks to Ronye's answer I was able to resolve this problem by using position: relative; and z-index: 10000.
Thanks!

blocks|key|812251|text|这发生在我错过主题的时候。确保主题存在，或者重新下载主题，并将其重新上传到您的服务器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|812252|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

This happened to me when I was missing the theme. Make sure the theme exists, or perhaps redownoad the theme, and reupload it to your server.

blocks|key|812421|text|这解决了我的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|812422|+$(+document+).ready(function()+{+++
++++$('#datepickerid').datepicker({
+++++zIndexOffset:+1040+#or+any+number+you+want
+++++});
});|code-block|syntax|javascript|812423|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

That what solved my problem:

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

blocks|key|597115|text|实际上，您可以有效地添加您的css，但是您可以修改jquery-ui.css或jquery-ui.min.css，并在ui-+.ui-datepicker{+z-index:+9999+!important;}类z-index:+9999+!important;的末尾添加。这两种方法都适用于我(您只需要一个；-)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|597116|entityMap^0|P|D|13|H|1R|16|2Y|P|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

In fact you can effectively add in your css <code>.ui-datepicker{ z-index: 9999 !important;}</code> but you can modify <code>jquery-ui.css</code> or <code>jquery-ui.min.css</code> and add at the end of the ui-datepicker class <code>z-index: 9999 !important;</code>. both things work for me (You only need one ;-))

blocks|key|812581|text|我不得不|type|unstyled|depth|inlineStyleRanges|entityRanges|data|812582|.datepicker.dropdown-menu+{
++++position:+relative;
++++z-index:+9999+!important;
}|code-block|syntax|javascript|812583|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had to 

<pre><code>.datepicker.dropdown-menu {
 position: relative;
 z-index: 9999 !important;
}
</code></pre>

blocks|key|812497|text|我也遇到了这个问题，因为datepicker使用输入的z索引，所以我添加了以下css|type|unstyled|depth|inlineStyleRanges|entityRanges|data|812498|#dialogID+input,.modal-dialog+input,+.modal-dialog+.input-group+.form-control{
++z-index:inherit;
}|code-block|syntax|javascript|812499|只需采用适用于您的规则，通过父id、类，或者在我的例子中是一个引导对话框，使用它们的input-group和form-control。|812500|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had this issue as well, since the datepicker uses the input's z-index, I added the following css

<pre><code>#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
 z-index:inherit;
}
</code></pre>

Just take the rule that applies to yours, either by parent id, class, or in my case a bootstrap dialog, using their input-group and form-control.

I have a slideshow div, and I have a datepicker field above that div.

When I click in the datepicker field, the datepicker panel show behind slideshow div.

And I have put the script as:

<a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js</a>

So I cannot change the z-index of datepicker in CSS. The z-index of datepicker which the script is generating is 1 and my slideshow div(also calling thru googleajaxapi) z-index is 5. So I guess I have to increase the z-index of date picker greater than 5. So is there any way to increase it ?

Someone can help me?

Jquery date picker z-index issue

服务器

jQuery

我有一个幻灯片放映div，并且在该div上方有一个日期选择器字段。当我单击datepicker字段时，datepicker面板显示在幻灯片显示div后面。我把脚本写成：所以我不能在CSS中改变datepicker的z索引。脚本生成的datepicker的z-index是1，而我的幻灯片div(也称为googleajaxapi) z-index是5。所以我想我必须将date picker的z-ind

问Jquery日期选择器z索引问题
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery日期选择器z索引问题EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery日期选择器z索引问题
EN