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?

Answer 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 ;-))

Answer 2

That what solved my problem:

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