jQuery of Dialog and datepicker - jquery-ui

Question

$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
i m use dialog box jquery in which i want use datepicker
it show me outsde of the dialog box.....thats problem....
<div id="dialog" title="Find Patient">
<p>
<table style="table-layout: fixed; width: 550px;">
<tr>
<td><label class="form-item-label form-item-label-right">Patient Id :</label> </td>
<td><input type="text" name="byId" id="byId" style="width: 90%" /></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
<tr>
<td><label class="form-item-label form-item-label-right">Patient`s Name :</label></td>
<td><input type="text" name="byName" id="byName" style="width: 90%"/></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="dob" name="dob" style="width: 90%"></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
</table>
</p>
</div>
when i m use the datepicker Jquery in last row of table in dialog box
load my html page Datepicker is load on page first

Answer 1

I dont know if this is your solution, but try this out if you are tend to use the Jquery datepicker you should add it to the element directly on load mabye and not on focus, it will append when you focus the textbox anyway. Notice the line of code $('#dob').datepicker();
$(function () {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$('#dob').datepicker();
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});