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

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?
})

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 )
        }});
});

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);
        }
    });

My suggestion is to save the selected date in datepicker1 and, before show the datepicker2, set mannually the same date. So, datepicker1.date == datepicker2.date. I hope it helps you.

var dateselected = '';

$( "#datepicker1" ).datepicker({
  onSelect: function(dateText, inst) {
    dateselected = dateText;
  } 
});
$( "#datepicker2" ).datepicker({
  beforeShow: function(input, inst) {
    if(dateselected != '')
       $( "#datepicker2" ).datepicker('setDate',dateselected);
  } 
});

You can see it running in the following link: http://jsbin.com/orizi4