Jquery date picker z-index issue

Question

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?

Here is the solution http://stackoverflow.com/questions/11533161/jquery-ui-datepicker-change-z-index — DmitryBoyko, Oct 07 '16 at 12:47

score 181 · Accepted Answer · edited Jul 13 '12 at 17:44

181

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.

edited Jul 13 '12 at 17:44

Justin Tanner

13,409
16
75
99

answered Jan 02 '12 at 19:53

Ronye Vernaes

2,425
1
15
21

8

Problem with this is that your input will display above other elements, this is rarely the desired effect – Serj Sagan Jun 06 '13 at 16:47
1

Is that supposed to work when **datepicker** is bound to a _span_? – rmoestl Sep 06 '13 at 07:56
10

`position : relative` is not acceptable and does not work in my situation. the solution bellow works fine. – Kiwy Dec 05 '13 at 15:55
1

this is not working on IE 11 browser. Is this browser specific? – Ashwini Maddala Mar 05 '15 at 05:03
3

This solution, while it does work, is not valid for all situations. Best is to overide with a single line of CSS '.ui-datepicker{ z-index: 9999 !important;}' – Daniel Tung Jun 03 '15 at 12:47
It worked for me. I had an issue with IE11: my datepicker were rendered under the overlay containing the input fields. This solution resolved everything. – webpaul Aug 27 '15 at 15:44
I've use : $('.picker').appendTo('body'); – XOR Sep 06 '16 at 04:11
For appended bootstrap input fields using 'input-group' this does work but needs to be on the parent
that has the input-group class
– andyb Oct 24 '19 at 19:44

score 154 · Answer 2 · answered Aug 27 '12 at 11:46

154

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.

answered Aug 27 '12 at 11:46

Aakash Sahai

3,705
6
24
40

I had to use `datepicker` rather than `ui-datepicker` – M Smith Jul 12 '14 at 17:24
JavaScript still uses discontinuous z-indexes, arbitrary stacking contexts, and has cross-browser compatibility issues in 2016? ActionScript 3 FTW (a decade ago, and still today). – Triynko Oct 03 '16 at 21:51

score 16 · Answer 3 · answered Apr 18 '13 at 22:36

16

worked for me

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

answered Apr 18 '13 at 22:36

Bashmakov Evgeniy

227
2
3

score 15 · Answer 4 · answered Apr 03 '13 at 16:15

15

Based in marksyzm answer, this worked for me:

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

answered Apr 03 '13 at 16:15

Lucas

587
5
8

1

But this only affects the input and not the datepicker overlay? – marksyzm Aug 08 '13 at 10:51
2

I'm using this example http://jqueryui.com/datepicker/ which it doesn't use an icon for the datepicker. With this solution I didn't have problems with the rest of web components. – Lucas Sep 27 '13 at 14:59

score 6 · Answer 5 · answered Jan 30 '18 at 16:02

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.

This solution is great and solved my problem. But edit it a little bit on "onClose" part. I put `$(this)` instead of `$('.ui-datepicker')`. So, it will set `z-index:0` to the "this input" instead of all inputs with ui-datepicker class. — Asuka165, Jul 09 '20 at 23:07

marksyzm · Answer 6 · 2013-08-08T10:50:39.563

5

Adding to Justin's answer, if you're worried about untidy markup or you don't want this value hard coded in CSS you can set the input before it is shown. Something like this:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Note that you cannot omit the "position": "relative" rule, as the plugin either looks in the inline style for both rules or the stylesheet, but not both.

The dialog("widget") is the actual datepicker that pops up.

edited Aug 08 '13 at 10:50

answered Mar 21 '13 at 15:47

marksyzm

4,457
1
25
25

1

This problem should be addressed in the JqueryUI scripts and be set to prevent overlays by default. Majority of usage cases would never want any input overlaying the calendar input capabilities. If there is a need to have input (or other elements) overlay the calendar, then a solution like this should be used. Having said that, @marksyzm would be the best solution IMO as you would apply it only when needed. – FrankO Apr 07 '14 at 16:45

score 5 · Answer 7 · answered May 18 '15 at 09:19

5

I had this issue i solved by using on click:

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

answered May 18 '15 at 09:19

Waqleh

8,454
8
61
91

This solution work perfectly on popup window for me. Thanks ! – darkomen Jun 09 '16 at 09:03

score 2 · Answer 8 · answered Oct 22 '11 at 14:38

2

See here: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

answered Oct 22 '11 at 14:38

Slawa

953
11
20

score 1 · Answer 9 · answered May 15 '16 at 10:13

1

That what solved my problem:

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

answered May 15 '16 at 10:13

limilou

21
2

score 1 · Answer 10 · edited May 22 '17 at 19:55

1

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

edited May 22 '17 at 19:55

QoP

21,478
16
61
69

answered May 22 '17 at 19:19

LeSage Stark

11
1

score 1 · Answer 11 · answered Feb 08 '12 at 17:23

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!

score 1 · Answer 12 · answered Feb 08 '12 at 17:32

1

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.

answered Feb 08 '12 at 17:32

Jaynesify · Answer 13 · 2017-04-07T12:41:51.513

0

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.

edited Apr 07 '17 at 12:41

answered Apr 07 '17 at 12:30

Jaynesify

19
3

score 0 · Answer 14 · answered Aug 20 '17 at 17:02

0

I had to

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}

answered Aug 20 '17 at 17:02

iMitwe

1,151
15
32

Jquery date picker z-index issue

14 Answers14

Linked