title: Jquery Mobile - Date Picker Problems
body: <p>So I am using the Date Picker input from Jquery Mobile and am having some difficulty getting it to render properly.  I have inclueded all the necessary files (<a href="http://dev.jtsage.com/jQM-DateBox/#/jQM-DateBox/demos/install.html" rel="nofollow">http://dev.jtsage.com/jQM-DateBox/#/jQM-DateBox/demos/install.html</a>) provided by the JQM team, and can get it to render when I add it directly to the static HTML:</p>
  
  <pre><code>&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
  &lt;input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}'&gt;
  </code></pre>
  
  <p>However, I am building a form dynamically and am adding this bit of HTML on the fly.  All of my other inputs are getting the Jquery Mobile styles except this one doing the following:</p>
  
  <pre><code>$(form).html(formFields);               
  var page = document.getElementById('page');
  $(page).trigger('create');  
  </code></pre>
  
  <p>formFields is the HTML string I am appending to the page.  </p>
  
  <p>It would appear that in the static HTML page above, when the page loads JQM is adding a bunch of stuff to that code.  It does not appear to be doing the same when I invoke the create method.  Does anyone have any idea if there is someway around this?  Thanks in advance.</p>
  
  <hr>
  
  <p>UPDATE:
  So with the helpful comment posted below, it would appear that since this is no an official JQM  input, calling the 'create' method will not refresh this input and apply the necessary styles.  The HTML posted above is exactly what I am creating with my string builder. The problem lay with the refreshing.  When the page loads, a bunch of extra stuff is added to the date input HTML.  Below is what it looks like in firebug... Any one experience this?  </p>
  
  <pre><code>&lt;div class="ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c"&gt;
    &lt;input id="mydate" class="ui-input-text ui-body-null ui-body-x" type="text" data-   options="{'mode': 'calbox'}" data-role="datebox" name="mydate"&gt;
    &lt;a class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="date picker" href="#" data-theme="c" style="vertical-align: middle; float: right;"&gt;
       &lt;span class="ui-btn-inner ui-btn-corner-all"&gt;
         &lt;span class="ui-btn-text"&gt;date picker&lt;/span&gt;
         &lt;span class="ui-icon ui-icon-grid ui-icon-shadow"&gt;&lt;/span&gt;
       &lt;/span&gt;
    &lt;/a&gt;
  </code></pre>
  
  <p> </p>