How to Add a Jquery Datepicker on Jquery Dialog Box Via Load Method

Recently I've worked on a form that requires a jquery datepicker to be rendered inside jquery's dialog element. Where I encountered several problems like:
1.) datepicker() should be invoke inside dialog
2.) the dialog created (div) should be remove from the page body


How I load the dialog using jquery's load method:

// Generate a unique id for the dialog div
        var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
        var dialogDiv = "
";

        // Load the form into the dialog div
        $(dialogDiv).load(this.href, function () {
            $(this).dialog({
                modal: true,
                resizable: false,
                title: dialogTitle,
                buttons: {
                    "Save": function () {
                        // Manually submit the form                        
                        var form = $('form', this);
                        $(form).submit();
                    },
                    "Cancel": function () { $(this).dialog('close'); }
                },
                open: function (event, ui) {
                    if ($('input.date-picker').length > 0) {
                        $('input.date-picker').datepicker({
                            showOn: "button",
                            buttonImage: "/Content/images/calendar.gif",
                            buttonImageOnly: true
                        });
                    }
                },
                close: function (event, ui) {
                    $('input.hasDatepicker').datepicker("destroy");
                    $(this).dialog("destroy");
                    $(this).remove();
                }
            });