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 J

Solution 1:

Something like this?

<p>Check-in: <inputtype="text"id="datepicker-check-in"></p><p>Check-out: <inputtype="text"id="datepicker-check-out"></p><script>
 $( function() {
    var check_in_datepicker, check_out_datepicker;

    check_in_datepicker = $( "#datepicker-check-in" ).datepicker({
        minDate: newDate(), // sets min date to todayonSelect: 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: newDate(),  // sets min date to today
    });

} );
</script>

Demo: JSFiddle.

Solution 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.