Add class to extra dates after selecting a date in jQuery UI datepicker-CodePudding

I need to (add class) highlight a couple extra dates when a date is selected. I can tap into change:

$(".some-booking-form").on("change", function() {
    var selectedDate = $(this).datepicker("getDate");
    
    // need to highlight more dates
});

I've looked around but only found solutions that require using beforeShowDay as config option when initializing. But I cannot do that since it's coming from a plugin in this CMS that I'm using.

CodePudding user response：

This is the cleanest way I was able to come up with:

// setTimeout so that my fn will run at the very end
// after the datepicker init took place
setTimeout(function() {

    let selectedDate;

    const $datepicker = $(".yith-wcbk-booking-start-date");

    // get beforeShowDay callback function on old instance of datepicker
    // sot that we can call it in our own method
    const oldBeforeShowDay = $datepicker.datepicker("option", "beforeShowDay");

    $datepicker.datepicker("option", "beforeShowDay",
         function(date) {
             var result = oldBeforeShowDay.apply(this, [date]);
             var _classes = result[1];

              // your logic to add more highlighting classes goes here.
              // _classes  = ' bg-green-highlighted';

             return [result[0], _classes.trim()];
          });


    $datepicker.change(function() {
         selectedDate = $(this).datepicker("getDate");
         
         // your logic goes here

         // at this point jquery ui will hide the calendar
         // $(this).datepicker("refresh"); if calendar stays open
    });

}, 0);