title: jQuery UI datepicker and mobile "wrapper"
body: <p>I have tried to use mobile "wrapper" for jQuery UI datepicker based on <a href="http://demos.jquerymobile.com/1.4.1/datepicker/" rel="nofollow">that page</a></p>
  
  <p>Working code (part of Wordress template) looks like:</p>
  
  <p>Header:</p>
  
  <pre><code>&lt;link type="text/css" href="/css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" /&gt;
  &lt;script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>part of HTML:</p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function() {
       jQuery("#dataStart").datepicker({
  
          minDate: '+2d',
          changeMonth: true,
          changeYear: true,
          dateFormat: 'mm/dd/yy',
          onSelect: function(date){
              var dates = date.split('/');
              var lastDate = new Date(dates[2], dates[0], 0);
              var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
              m = ('0'+ (m+1)).slice(-2);
  
              jQuery('#dataEnd').val(m+'/'+d+'/'+y);
  
              var start = jQuery('#dataStart').datepicker('getDate');
              jQuery('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
              var end = jQuery('#dataEnd').datepicker('getDate');
              var days   = ((end - start)/1000/60/60/24)+1;
  
              jQuery('#calculated').text(days);          
          }
      });
  });
  &lt;/script&gt;
  &lt;tr&gt;
  &lt;td width="123" height="25" style="text-align: right;"&gt;&lt;label for="dataStart"&gt;Start Date:&lt;/label&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td align="left" valign="top" class="copy11"&gt;&lt;input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" data-role="date" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td width="123" height="25" style="text-align: right;"&gt;&lt;label for="dataEnd"&gt;End Date:&lt;/label&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td align="left" valign="top" class="copy11"&gt;&lt;input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>and when I follow example from provided link above, to have it "mobile friendly", datepicker jQuery UI API is not working as well is not really getting to be "mobile friendly".</p>