jQuery UI Datepicker destroy and reinitialize calendar with new DefaultDate

问题

I'm building a booking system, and want our checkout date picker calendar to show appropriate dates. For example, I check in June 5th 2018, the checkout calendar should start in June 2018. To accomplish this we initialize the checkout calendar with defaultDate set to the check in date. Simple, and it works the first time. If, however, we go back and change the check in date, the checkout calendar keeps the old check in date for its default. I thought I had fixed this problem by destroying the checkout calendar and re-initializing a new one with a new defaultDate, and can, in fact, change any other attribute except defaultDate.

Here's some code:

First Checkout Initialization

$("#checkout").datepicker({
      numberOfMonths: 2,
      changeMonth: false,
      changeYear: false,
      defaultDate: checkin,
      beforeShow: function() {...},
      beforeShowDay: function(date) {...}
    })

*After selecting a new checkin day *

$( "#checkout" ).datepicker( "destroy" );

If I try to simplify things in the console, I manually destroy the checkout calendar, check to make sure it doesn't pop up when clicking the checkout field, then reinitialize a new checkout calendar using ONLY the defaultDate parameter. This shows me a default single month calendar with the old date.

What on earth could be happening here?

回答1:

Something like this?

<p>Check-in: <input type="text" id="datepicker-check-in"></p>
<p>Check-out: <input type="text" id="datepicker-check-out"></p>

<script>
 $( function() {
    var check_in_datepicker, check_out_datepicker;

    check_in_datepicker = $( "#datepicker-check-in" ).datepicker({
        minDate: new Date(), // sets min date to today
        onSelect: function( dateText, instance ){
            // When selecting a date in the check-in field, 
            // update check-out's min date to make sure
            // it can't be older than check-in's date
            check_out_datepicker.datepicker('option', 'minDate', dateText);
        }
    });

    check_out_datepicker = $( "#datepicker-check-out" ).datepicker({
        minDate: new Date(),  // sets min date to today
    });

} );
</script>

Demo: JSFiddle.

回答2:

I ended up solving this problem by utilizing

$("#checkout").datepicker({
  numberOfMonths: 2,
  changeMonth: false,
  changeYear: false,
  beforeShow: function() {...},
  beforeShowDay: function(date) {...}
})
$("#checkin").datepicker("setDate", checkin);

Instead of using defaultDate or minDate, which were retaining their values even after all the other datepickers on the page had been destroyed. I posted this problem elsewhere and will update this answer if I get any additional feedback, but for the time being, anyone with the same issue can likely find some relief by using the setDate built-in function instead of setting defaultDate or minDate options.

来源：https://stackoverflow.com/questions/49653043/jquery-ui-datepicker-destroy-and-reinitialize-calendar-with-new-defaultdate

标签

javascript

jquery

jquery-ui

jquery-ui-datepicker