jQuery datapicker appearing behind twitter bootstrap modal

Question

I am using Bootstrap v2.3.2 and jQuery Datepicker v1.10.0,

On a modal I am trying to make use of the datepicker and it is appearing behind the modal on Firefox and

Answer 1

As @Matt answered, apply z-index higher than modal’s z-index, suppose modal has the below z-index:

modal.fade {
    z-index: 10000000 !important;
}

Then apply z-index more than modal for datepicker class:

.datepicker {z-index: 20000000 !important}

Answer 2

I faced the same issue, fixed it with;

.datepicker{z-index:9999 !important}

Ref: github

Answer 3

This answer covers the issue.

This is a z-index issue. Normally applying a higher z-index via CSS would work, however jQuery resets the CSS each time the Datepicker UI is drawn.

The solution re-applies the CSS each time it's drawn by using the beforeShow property.