JQueryDatepicker in Modal Dialog

JQuery Datepicker not working in Modal Dialog

HTML

<div id="mainpage" title="Information..." style='display:block;'>Sample Main Page<br />
    <a href="#" id="dialoglink">Click here to launch dialog</a>
</div>

<div id="dialog" title="Search Screen..." style='display:none;'>
    <form id="mainform">
        <table style='font-size:12px;'>
            <tr>
                <td>A/C #</td>
                <td>
                    <input type='text' name='account_no' />
                    <input type='hidden' name='client_account' />
                </td>
            </tr>
            <tr>
                <td>Type:</td>
                <td>
                    <input type='text' name='inv_type' />
                    <input type='hidden' name='product_code' />
                </td>
            </tr>
            <tr>
                <td colspan='2'>
                    <fieldset>
                        <legend>Date</legend>
                        <table style='font-size:12px;'>
                            <tr>
                                <td>From:</td>
                                <td>
                                    <input type='text' name='fromdt' id='datepicker1' />
                                </td>
                            </tr>
                            <tr>
                                <td>To:</td>
                                <td>
                                    <input type='text' name='todt' id='datepicker2' />
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
        </table>
    </form>
</div>

JavaScript

$(function() {
	    

	    $('#datepicker1').datepicker({
	        changeMonth: true,
	        changeYear: true

	    });

	    $('#datepicker2').datepicker({
	        changeMonth: true,
	        changeYear: true

	    });

	    $("#dialog").dialog({
	        bgiframe: true,
	        autoOpen: false,
	        width: 235,
	        modal: true,
	        //jqModal: true,
	        //modal: false,
	        buttons: {
	            'Close': function () {
	                $(this).dialog('close');
	            }
	        },
	        // Added the close button to hide datepicker on dialog close
	        close: function () {
	            $("#datepicker1").datepicker('hide');
	            $("#datepicker2").datepicker('hide');
	        }
	    });

    $('#dialoglink').click(function(){
        $('#dialog').dialog('open');
    });
    
    $('#dialog').dialog('open');
    
	});