title: jQuery Mobile -> Override jQuery UI Datepicker -> Layout broken
body: <p>I am using jQuery Mobile in my web application. There is a datepicker which overrides the default jQuery UI datepicker.</p>
  
  <p>Here is the source:
  <a href="https://github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker" rel="nofollow">https://github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker</a></p>
  
  <p>The JavaScript file which overrides it, is here:
  <a href="https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js" rel="nofollow">https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js</a></p>
  
  <p>I have this line of code:</p>
  
  <pre><code>$(".ui-page").live("pagecreate", function(){
      $("input[type='date'], input[data-type='date']").each(function(){
          $(this).after($("&lt;div /&gt;").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true }));
      });
  });
  </code></pre>
  
  <p>In this case, I get a datepicker which is always visible. To have the visibility only if a user clicks into a date text field, the datepicker must be connected to the input field, which is here not the case.
  So I have to delete the <code>.after("&lt;div /&gt;")</code>. But then, the design of the datepicker is totally broken, it seems that the rewrite of the datepicker does not take effect, because the CSS styles are not applied.</p>
  
  <p>So, what's wrong here?</p>
  
  <p>Thank you in advance &amp; Best Regards.</p>