jQuery UI Datepicker

Shows use of onSelect event that's not documented (1.10.4), and use of $.datepicker.formatDate() to format dates.

by Good Muyis

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<input type="text" id="from"/><br>
<input type="text" id="alternate"/><br>
<input type="text" id="to"/><br>
<input type="text" id="alternate1"/><br>
<input type="text" id="calculated"/><br>

<div id="datesbetween"></div>

JavaScript

$(document).ready(function() {
  $( "#from" ).datepicker({
    altField: "#alternate",
    altFormat: "M d,yy",
    minDate: new Date(),
    maxDate: "+7d",
    onSelect: function(selected) {
      $("#to").datepicker("option","minDate", selected);
      calcDiff();
    }
  });

  $( "#to" ).datepicker({
    altField: "#alternate1",
    altFormat: "M d,yy",
    minDate: new Date( (new Date()).getTime() + 86400000 ),
    maxDate:"+14D",
    onSelect: function(selected) {
      $("#from").datepicker("option","maxDate", selected);
      calcDiff();
    }
  });

  function calcDiff() {
    var date1 = $('#from').datepicker('getDate');
    var date2 = $('#to').datepicker('getDate');
    var diff = 0;
    $('#datesbetween').empty();
    if (date1 && date2) {
      diff = Math.floor((date2.getTime() - date1.getTime()) / 86400000);
        for(var d = date1.getTime(); d <= date2.getTime(); d = d + 86400000){
            $('#datesbetween').append( '<br>' + $.datepicker.formatDate( "d MM, yy", new Date(d) ) );
        }
    }
    $('#calculated').val(diff);
  }
});