How to change jQuery UI Datepicker Z-Index value?

Question

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.

        $(function () {
        $("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5
        });
        $("#dpimage6").click(function () {
            $("input[id$='txtPreviousCutOff']").datepicker("show")
        });
    });

score 6 · Accepted Answer · answered Dec 11 '12 at 16:32

6

.ui-datepicker-div { z-index: 999999; }

or with 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);
});

answered Dec 11 '12 at 16:32

Magicmarkker

1,063
7
25

I went this is method and it's working so far! All 3 are good answers though, wish i could check them all :) – user1732364 Dec 11 '12 at 17:06
I had to do #ui-datepicker-div to specify the element by ID (they're all named identically in our version of jQuery). – Stephen O'Flynn Jul 28 '14 at 11:45
This is a bit hacky as there may be a `.modal` by bootstrap laying around which has `z-index: 1050`. I would recommend *not* mixing both, jquery-ui and bootstrap at same time/page/whole project. But switch to one exclusively to avoid such interferences. – Roland Oct 27 '17 at 11:06
Indeed there may be, but the original question didn't mention that or bring it up as an issue so I went with what information I had. – Magicmarkker Oct 27 '17 at 14:55

Sushanth -- · Answer 2 · 2013-10-28T17:16:49.197

5

You would need to apply styles to the ui-widget-content class

.ui-widget-content
{
    z-index: 100; 
}

Make sure to have the class added with better specificity so that it overrides the UI styles

#datepicker.ui-widget-content {}

edited Oct 28 '13 at 17:16

answered Dec 11 '12 at 16:34

Sushanth --

55,259
9
66
105

score 4 · Answer 3 · edited Jan 02 '15 at 12:51

4

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.

#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }

edited Jan 02 '15 at 12:51

Subin Sebastian

10,870
3
37
42

answered Jun 20 '14 at 14:39

Ajay2707

5,690
6
40
58

score 2 · Answer 4 · answered Jan 10 '14 at 02:47

Looks like datepicker copies whatever z-index value your original input element has. I can think of 2 ways to solve this:

Non-JS Just add z-index:1051; to the style attribute of your input element. This is based on the observation that bootstrap .modal class uses a z-index of 1050.

Dynamic solution using JS When declaring your datepicker, add a beforeShow handler that retrieves the z-index of .modal and set datepicker's z-index to 1 higher than that:

datepicker({beforeShow: function(inputElem, inst) {
          var zi = Number($(inputElem).closest('.modal').css('z-index'));
          $(inputElem).css('z-index',zi+1);
          }});

Or avoid using BS2/3 + jquery-ui at the same time and switch to one of them exclusively. — Roland, Oct 27 '17 at 11:07

score 1 · Answer 5 · answered Dec 11 '12 at 16:37

1

Use this to set your datepicker z-index: (not tested but should work)

$("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5,
            beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); }
        });

answered Dec 11 '12 at 16:37

A. Wolff

74,033
9
94
155

I think this solution should work, but it all depends on the version of jQuery(perhaps). In 1.9, the version I am using atm, this won't do, for the function to present datepicker, "_showDatepicker" is called after beforeShow, and inside which function it sets the z-index of datepicker, that overrides the z-index we populate in beforeShow. Didn't check other version. – hjbolide Mar 05 '14 at 22:30

score 0 · Answer 6 · edited Sep 21 '14 at 08:00

0

Simply change the 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.

This overrides any inline styling which is added by the javascript.

hope this Will Work :)

Happy Coding

edited Sep 21 '14 at 08:00

George G

7,443
12
45
59

answered Sep 21 '14 at 07:32

Mohan D Kishore

31
6

score 0 · Answer 7 · answered Jul 28 '17 at 02:59

0

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

answered Jul 28 '17 at 02:59

tuberider

124
9

How to change jQuery UI Datepicker Z-Index value?

7 Answers7