在 jQuery UI 日期选择器中选择日期后，将 class 添加到额外日期

Question

我需要（添加 class）在选择日期时突出显示几个额外的日期。我可以利用变化：

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

我环顾四周，但只找到了需要在初始化时使用 beforeShowDay 作为配置选项的解决方案。但我不能这样做，因为它来自我正在使用的 CMS 中的一个插件。

Answer 1

这是我能想出的最干净的方法：

// 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);

在 jQuery UI 日期选择器中选择日期后，将 class 添加到额外日期

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

jquery

jquery-ui