When creating a dialogue with jQuery that contains a Datepicker text input the Datepicker calendar will appear below the dialogue due to the dialogue’s z-index being higher. The easiest universal way to work around this is to include a one liner in the open event function of the initial dialogue call.
$("#dialogue").dialog({
modal: true,
open: function () {
$("#ui-datepicker-div").css(
"z-index",
$(this).parents(".ui-dialog").css("z-index") + 1,
);
},
});