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 parameter in this version had an error in setting z-index, which from time to time was displayed under other controls. I just want to tweak the dp z-index so that it appears on top of other controls. I tried changing the z-index to a .js file, but that failed. I read that you should set this value in the aftershow event, because the value will be overwritten if it is earlier (not sure if this is true). Here is an example of how im creates an instance of dp ... I also bound timepicker to datepicker.

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

Answer 1

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

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

Answer 2

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

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

Make sure the class is added with the best specification so that it overrides UI styles

 #datepicker.ui-widget-content {} 

Answer 3

This code works for me. Suppose I have a div name to select the date “ui-datepicker-div”, and the class applies “ui-datepicker”. Therefore, I give css as my work for me.

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

Answer 4

It looks like datepicker is copying any z-index value that the original input element has. I can think of two ways to solve this problem:

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

A dynamic solution using JS When you declare your dumper, add a beforeShow handler that fetches the z-index .modal and sets the z-index datepicker 1 higher than this:

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

Answer 5

Use this to set the z-index of your datapicker: (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); } }); 

Answer 6

Just change the CSS:

As before:

 /* Original */ .ui-datepicker { width: 17em; padding: .2em .2em 0 } /* Modify */ .ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999 !important; } 

Remember to add !Important .

This overrides any inline style that javascript added.

hope it works :)

Happy coding

Answer 7

I called this function when the user clicks on the text field used to control the datepicker

 function textboxWhenClicked(){ $("#textboxid").datepicker(); $("#ui-datepicker-div").css("z-index", 999999); } 

Worked fine

-M