Question

I make a range datepicker with “from date” and “to date”.

Here code:

From <input type="text" id="from" name="from" style="width: 80px" readonly>
To <input type="text" id="to" name="to" style="width: 80px" readonly>

<script>
$(function() {
    $( "#from" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        minDate: 0,
        changeMonth: true,
        beforeShowDay: $.datepicker.noWeekends,
        onSelect: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#to" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        changeMonth: true,
        beforeShowDay: $.datepicker.noWeekends,
        onSelect: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});
</script>

What I want to do is: when user choose specific date at #from, I want to set maximum date at #to, say 10 days, from date in #from.

How would I do that?
Thanks.

Answer 1

Try this jsFiddle example

jQuery

$('#endDate').datepicker({
    onSelect: function() {},
    onClose: function() {
        $(this).focus();
    }
});
$('#startDate').datepicker({
    onSelect: function(dateText, inst) {
        var nyd = new Date(dateText);
        nyd.setDate(nyd.getDate() + 10);
        $('#endDate').datepicker("option", {
            minDate: new Date(dateText),
            maxDate: nyd
        });
    },
    onClose: function() {
        $(this).focus();
    }
});​

When you pick a date for the start date, you set the maxDate option of the end date plus 10 days.