Datepicker jQuery UI API not working after "wrapping"

[InteractM]

Working code (part of Wordress template) looks like:

<link type="text/css" href="/css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>

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);          
        }
    });
});

<tr>
<td width="123" height="25" style="text-align: right;"><label for="dataStart">Start Date:</label>&nbsp;</td>
<td align="left" valign="top" class="copy11"><input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" data-role="date" /></td>
</tr>
<tr>
<td width="123" height="25" style="text-align: right;"><label for="dataEnd">End Date:</label>&nbsp;</td>
<td align="left" valign="top" class="copy11"><input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly /></td>
</tr>

and when I use your solution to have it "mobile friendly" datepicker jQuery UI API is not working as well is not really "mobile friendly"