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.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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 5

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.

Answer 6

I had to

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