JQuery Restrict the difference between two datepickers

Question

I have 2 datepickers

  $(function() {
    $(\'#DateFrom\').datepicker({ onSelect: showUser, minDate: -90, maxDate: \"+1D\" });
  });

  $(function() {
    $(\'#         


        

Answer 1

Alternate suggestion:

If you are restricting the day they can pick in the "TO" datepicker to only 1 day, then why have a second datepicker at all? Just calculate 7 days from the FROM datepicker date and display it as text. Silly to make the user pick a date when theres only one option.

Answer 2

A little suggestion, try finding a JQuery Range Picker. They'll include some of these tedious functionality for you already. Going on google and searching just that gives you a ton of choices.

etc..https://github.com/longbill/jquery-date-range-picker

Back to the question though, you could put a callback function on 'onClose' in 'DateFrom' so that whenever the date is change, you will change the 'minDate' on 'DateTo' as well.

Answer 3

Use the beforeShow parameter to modify the minDate of the To field, and then simply use date objects and a +7 to select a date one week from the From date:

$("#to").datepicker({
    defaultDate: "+1w",  // set the default to 1 week from today

    beforeShow: function () {
        var date = $('#from').datepicker('getDate');  // From date
        date.setDate(date.getDate() + 7);             // 7 days after From date
        $( "#to" ).datepicker( "option", "minDate", date );  // set minDate to from+7
    }
});

Fiddle

Answer 4

Something like this

$(function () {
    $('#DateFrom').datepicker({
        onSelect: function() {
            var date = $('#DateFrom').datepicker('getDate');
            date.setTime(date.getTime() + (1000*60*60*24*6));
            $('#DateTo').datepicker('option', 'maxDate', date);
            $('#DateTo').datepicker('option', 'minDate', $('#DateFrom').datepicker('getDate'));
            showUser();
        },
        minDate: -90, 
        maxDate: "+1D"
    });

    $('#DateTo').datepicker({
        onSelect: showUser,
        minDate: -90, 
        maxDate: "+1D"
    });
});

FIDDLE