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

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

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

回答3:

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

来源：https://stackoverflow.com/questions/5314060/change-displayed-month-in-jquery-datepicker-depending-on-another-datepicker-ins