Flatpickr - 限制可以选择的日期数量

Question

我在我的应用程序上使用“flatpickr”作为日期时间选择器。此日期选择器允许选择多个日期，但在阅读文档后，我找不到任何方法来限制所选日期的最大数量。

jQuery：

$('#gig_date_multi').flatpickr({
  "mode": "multiple",
  "locale": "<%= I18n.locale %>",
  minDate: new Date(),
  enableTime: true,
  time_24hr: true,
  minuteIncrement: 15,

    onChange: function(selectedDates, dateStr, instance) {

      var array = selectedDates;
      if (array.length >= 3) {
        console.log("YOU HAVE REACHED YOUR LIMIT")
      } else {
        console.log("YOU CAN STILL SELECT MORE DATES")
      }

      var newHTML = [];
      $.each(array, function(index, value) {
        var formatted = moment(value).format("HH:mm - dddd Do MMMM YYYY");
        newHTML.push('<span>' + formatted + '</span>');
      });

      $(".multi-dates").html(newHTML.join(""));

    }
});

在这里，当选择 3 个日期时，控制台输出“您已达到限制”，我想也许我可以在发生这种情况时禁用所有日期（除了先前选择的日期）。

Flatpickr 有一个disableandenable函数，但我不确定如何将其集成到代码中......我是一个 jquery 初学者。

文档显示了这两种方法；

{
    "disable": [
        function(date) {
            // return true to disable
            return (date.getDay() === 5 || date.getDay() === 6);

        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // start week on Monday
    }
}

和

{
    enable: ["2017-03-30", "2017-05-21", "2017-06-08", new Date(2017, 8, 9) ]
}

Answer 1

您可以使用：

set(option, value)：将配置选项选项设置为值，重绘日历并更新当前视图（如有必要）

为了禁用除选定的 3 个日期之外的所有日期，您可以编写：

instance.set('enable', selectedDates);

并且，为了重置，您可以：

instance.set('enable', []);

另一种方法可以基于通过函数启用日期：

instance.set('enable', [function(date) {
    if (selectedDates.length >= 3) {
        var currDateStr = FlatpickrInstance.prototype.formatDate(date, "d/m/Y")
        var x = selectedDatesStr.indexOf(currDateStr);
        return x != -1;
    } else {
        return true;
    }
}]);

片段：

instance.set('enable', selectedDates);

instance.set('enable', []);

instance.set('enable', [function(date) {
    if (selectedDates.length >= 3) {
        var currDateStr = FlatpickrInstance.prototype.formatDate(date, "d/m/Y")
        var x = selectedDatesStr.indexOf(currDateStr);
        return x != -1;
    } else {
        return true;
    }
}]);