When the date picker is added to a modal dialog (a div tag with a higher value z-index than the parent page), the date picker does not adapt the z-index of the modal dialog as a starting point. Rather it uses the parent page which causes the date picker to render under the modal dialog.

Seems to me the "auto" z-index needs to take into account the nesting on the page before it renders into the wrong location.

The work-a-round is to manually set the z-index in the ui.datepicker-div CSS file to a value greater than the maximum nesting value.