日期选择器，动态启用/禁用日期

Question

我正在尝试研究如何使用 jQuery UI 的 MultiDatesPicker 动态启用和禁用日期。 http://luca.lauretta.info/Multiple-Dates-Picker-for-jQuery-UI/

我可以使用 addDisabledDates 并将日期数组传递给选择器，这些日期将显示为禁用。这可行，但我如何再次启用它们？

我尝试修改日期数组，并调用日期选择器，但这似乎没有加载新日期..旧日期仍然显示为禁用。

这是我正在做的事情的示例：

$(document).ready(function() {
    
    addeddates = ['1 January 1970', '5 November 2024', '6 November 2024']       
    datepicker()
    
    function datepicker() {
            
        $('.cals').multiDatesPicker({
        dateFormat: "d MM yy",
        minDate: 0, // today
        maxDate: 365, // +30 days from today
        multidate: true,
        defaultDate:"0d", 
        addDisabledDates: addeddates,
        beforeShow: function(d) {
            addeddates = ['1 January 1970']     
            datepicker()
            }
        })
    }

})

当调用日期选择器时，11 月 5 日和 6 日将被禁用。我希望将

addeddates

数组更新为一天，然后调用该函数将使它们可用。

有没有办法动态启用/禁用日期？ 如果另一个日期选择器支持多个日期并且可以在同一页面上的多个输入字段上使用，我愿意使用它。

谢谢

Answer 1

看起来你每次都必须重建它们。

https://jsfiddle.net/Twisty/om7hu4ga/60/

JavaScript

function buildDatePicker(target) {
  $(target).multiDatesPicker("destroy")
  $(target).multiDatesPicker({
    addDisabledDates: $("#mdp-demo-a").multiDatesPicker("getDates"),
  })
}

$("#mdp-demo-a").multiDatesPicker({
  onSelect: function (dt, ui) {
    console.log("A - Date Selected.")
    if ($("#mdp-demo-b, #mdp-demo-c").prop("disabled")) {
      $("#mdp-demo-b, #mdp-demo-c")
        .prop("disabled", false)
        .multiDatesPicker({
          addDisabledDates: $("#mdp-demo-a").multiDatesPicker("getDates"),
        })
    }
    buildDatePicker("#mdp-demo-b, #mdp-demo-c")
  },
})

我禁用了次要的，直到第一个有了值。不这样做可能会引发有关它们未初始化为 MultiDatePckers 或 DatePicker 的错误。