Change displayed month in jQuery datepicker, depending on another datepicker instance

Question

I have two datepicker fields, one is 'start date' the other is 'end_date'.

I would like to have the feature that, after user selected 'start date', then the 'end date' calendar should show by default the month contain the 'start date'.

Vise versa, if user first select end date, the calendar for the start date should show the month contain selected end date.

how to implement inside jQuery datepicker? What's the datepicker options I should defined?

$("#start_date").datepicker({
  //which datepicker options should put here?
})

Answer 1

This sets the default date of the other calendar as you want. If a date is already selected it doesn't change it.

    $(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "option", "defaultDate", dateText );
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "option", "defaultDate", dateText );
        }});
    });

If you want to force the other date picker to reset it's already selected date to the other calendars month, use this:

$(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "setDate" , dateText )
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "setDate" , dateText )
        }});
});

Answer 2

You could try this to avoid user selecting end-date less then start-date and start-date greater than end-date.

    $("#start_date").datepicker({
        defaultDate: '-7d',
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("end-date").datepicker('option', 'minDate', $(this).datepicker('getDate') || '-1m');
        }
    });
    $("end-date").datepicker({
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("#start_date").datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
        }
    });