jQuery datapicker appearing behind twitter bootstrap modal

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}

I faced the same issue, fixed it with;

.datepicker{z-index:9999 !important}

Ref: github


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.