Jquery date picker z-index issue

2019-01-16 10:44发布

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:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

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?

14条回答
Luminary・发光体
2楼-- · 2019-01-16 11:05

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.

查看更多
beautiful°
3楼-- · 2019-01-16 11:07

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

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.

查看更多
男人必须洒脱
4楼-- · 2019-01-16 11:10

Based in marksyzm answer, this worked for me:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});
查看更多
疯言疯语
5楼-- · 2019-01-16 11:11

simply in your css use '.ui-datepicker{ z-index: 9999 !important;}' Here 9999 can be replaced to whatever layer value you want your datepicker available. Neither any code is to be commented nor adding 'position:relative;' 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.

查看更多
一纸荒年 Trace。
6楼-- · 2019-01-16 11:12

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.

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

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.

查看更多
Explosion°爆炸
7楼-- · 2019-01-16 11:14

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

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

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.

查看更多
登录 后发表回答