Plain Datepicker UI Example

by jtbowden

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="datepicker_wrapper">
    <span>From:
        <input type="text" id="from" />
    </span>
    <span>To:
        <input type="text" id="to" />
    </span>
</div>

JavaScript

$("#from").datepicker({
     changeMonth: true,
     numberOfMonths: 2,
     onClose: function (selectedDate) {
         $("#to").datepicker("option", "minDate", selectedDate);
     }
 });
 $("#to").datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 2,
     onClose: function (selectedDate) {
         $("#from").datepicker("option", "maxDate", selectedDate);
     },
     beforeShow: function () {
         var date = $('#from').datepicker('getDate');
         date.setDate(date.getDate() + 7);
         $( "#to" ).datepicker( "option", "minDate", date );
     }
 });