Datepicker with days (or nights) between dates

Datepicker with days (or nights) between dates

Thanks to all who have helped me out with this, especially kbwood.au. I have posted the code here for anyone who may need a similar setup. I have only tested in IE7. Compiled in Webplus X2.
 
The calculation works even with date format set at DD dd-mm-yy. The 'nights' text box is set to readonly.
 
  1. <title>jQuery UI Datepicker with days (or nights) between dates</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/black-tie/jquery-ui.css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>  


  2. <!-- page specific styles -->
    <style type="text/css">body{ font: 60.0% "Trebuchet MS", sans-serif; margin: 50px;}</style>
  4. <head>
    <script type="text/javascript">
    $(function() {
          $('#from').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
                dateFormat: 'DD dd-mm-yy',
                minDate: '0',
                maxDate: '+2Y',
                      onSelect: function(dateStr) {
                            var min = $(this).datepicker('getDate');
                            $('#to').datepicker('option', 'minDate', min || '0');
                            datepicked();
                }});
          $('#to').datepicker({
            numberOfMonths: 2,
            firstDay: 1,
                dateFormat: 'DD dd-mm-yy',
                minDate: '0',
                maxDate: '+2Y',
                      onSelect: function(dateStr) {
                            var max = $(this).datepicker('getDate');
                            $('#from').datepicker('option', 'maxDate', max || '+2Y');
                            datepicked();                                               
                }});
    });
      
    var datepicked = function() {


























  5.  var from = $('#from');
        var to = $('#to');
        var nights = $('#nights');
     
         var fromDate = from.datepicker('getDate')
     
            var toDate = to.datepicker('getDate')
     
            if (toDate && fromDate) {
            var difference = 0;
                var oneDay = 1000*60*60*24;
                var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay);
                nights.val(difference);











  6.             }
    }
  7. </script>
  8. <head>
  10. </body>
  11. <input type="text" id="from" name="from" size="28" style="width:194px; /*Tag Style*/" value="" >
  12. <input type="text" id="to" name="to" size="28" style="width:194px; /*Tag Style*/" value="" >
  13. <input type="text" id="nights" name="nights" size="4" style="width:50px; /*Tag Style*/" value="" readonly="readonly">
  14. </body>
 
Thanks,
Joe