ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

ajax loading content in jquery dialog content contains a datepicker. 2nd time dialog is opened the date picker doesn't work

so at first I had a page I was loading with an ajax call. this page does an ajax post. I discovered this issue when do the post when the page returned the date pickers wouldn't change the dates in the text boxes, I had a lot of options setting on both the modal and the date pickers. in an attempt to isolate the problem. I strip out all the configurations, also I had read some thing about dialog doing funny things when they are not living on the base page, so I moved the modal to the base page. 

user actions to duplicate issue
so I click the btn to load the modal works fine datepicker works.
close the modal and click the btn to open the modal again 
the datepicker doesn't work the 2nd time the modal opens.

page setups
ui 1.10.2  jquery 1.9.1 and tried 2.0. 2  even thought I'm sure the issue is in my code or the ui code.
breaking in chrome and ie 9
and it html 5 doc type
code 
  1. //base page
  2. <button id="modelbtn">click to load modal</button>

  4. <div id="dialogModalCreate" />

  6. <script type="text/javascript">
  7.     var modaldia;

  9.     $(document).ready(function () {
  10.          modaldia = $("#dialogModalCreate");
  11.         
  12.       $("#modelbtn").click(function () {
  13.             modaldia.dialog({
  14.                 autoOpen: false,
  15.                 width: 750,
  16.                 modal: true
  17.                
  18.             });
  19.             modaldia.dialog('open');
  20.             modaldia.load("/home/Ajaxform", function () {
  21.                //tryed loading date picker here 
  22.                 //var startDate = $("#EffectiveStartDate");
  23.                 //startDate.unbind();
  24.                 //startDate.datepicker();
  25.             });

  27.         });

  29.     });
  30.     
  31. </script>

  33. //ajax form page
  34.  <div >
  35.     <input id="" type="text" />
  36.     <input id="EffectiveStartDate" type="datetime" />

  38.     </div>
  39. <script type="text/javascript" language="javascript">
  40. //also tryed loading the date picker here
  41.                  //var startDate = $("#EffectiveStartDate");
  42.                // startDate.unbind();
  43.                // startDate.datepicker();
  44. </script>

if move the content from the ajax page and take the ajax loaded content out of the equation then every thing works fine. but this really doesn't help me so. what I need really is for the modal and the content to be on the ajax loaded page, but that has the same issue of the datepicker not working after and ajax post. or if the page is closed and reopened