多个日期选择器 - 禁用选定的日期

Question

我正在使用“MultiDatesPicker for jQuery UI”http://luca.lauretta.info/Multiple-Dates-Picker-for-jQuery-UI/ 据我所知，它使用 jQuery-ui Datepicker。

在我的网站上，我在输入字段 A、B 和 C 上配置了 3 个日期选择器，允许用户为每个字段选择多个日期。

如果用户在选择器 A 中选择了日期，则该日期不应在选择器 B 或 C 中可用。 如果他们在选择器 A 中删除该日期，那么它应该可供选择器 B 和 C 使用。

multiDatesPicker 的调用方式如下：

$('#dates' + i).multiDatesPicker({
    dateFormat: "d MM",
    minDate: 0,
    maxDate: 365,
    onSelect: function(date) {
    },
});

有人知道如何实现上述目标吗？

谢谢

Answer 1

考虑以下演示：

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

JavaScript

$("[id^='mdp-demo-']").multiDatesPicker({
  onSelect: function (dt, ui) {
    var that = $(this)
    if (that.is("#mdp-demo-a")) {
      console.log(that.multiDatesPicker("getDates"))
      $("[id^='mdp-demo-']")
        .not(that)
        .multiDatesPicker({
          addDisabledDates: that.multiDatesPicker("getDates"),
        });
    }
  },
})

这会在添加或删除每个日期时更新

addDisabledDates

设置。