CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
Logan Bertram
Logan Bertram

Reputation: 1942

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?

Upvotes: 2

Views: 5692

Answers (2)

Logan Bertram
Logan Bertram

Reputation: 1942

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.

Upvotes: 0

cabrerahector
cabrerahector

Reputation: 3948

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.

Upvotes: 2

Related Questions