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

【问题标题】：Flatpickr - Limit the amount of dates that can be selectedFlatpickr - 限制可以选择的日期数量
【发布时间】：2018-01-05 14:43:39
【问题描述】：

我在我的应用程序中使用“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(""));

    }
});

Here when 3 dates are selected the console outputs "YOU HAVE REACHED YOUR LIMIT" and I was thinking maybe I could disable all dates (apart from previously selected ones) when this occurs.

Flatpickr 有一个 disable 和 enable 函数，但我不确定如何将它集成到代码中...我是 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) ]
}

【问题讨论】：

这些是可以选择的日期范围还是个别日期？
@Cue 这些是可以选择的个别日期。

标签： jquery datepicker flatpickr

【解决方案1】：

你可以使用：

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

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

instance.set('enable', selectedDates);

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

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

不同的方法可以基于Enabling dates by a function：

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;
    }
}]);

sn-p：

$('#gig_date_multi').flatpickr({
    "mode": "multiple",
    "locale": 'en',
    minDate: new Date(),
    enableTime: true,
    time_24hr: true,
    minuteIncrement: 15,
    onChange: function(selectedDates, dateStr, instance) {
        var selectedDatesStr = selectedDates.reduce(function(acc, ele) {
            var str = instance.formatDate(ele, "d/m/Y");
            acc = (acc == '') ? str : acc + ';' + str;
            return acc;
        }, '');
        instance.set('enable', [function(date) {
            if (selectedDates.length >= 3) {
                var currDateStr = instance.formatDate(date, "d/m/Y")
                var x = selectedDatesStr.indexOf(currDateStr);
                return x != -1;
            } else {
                return true;
            }
        }]);
    }
});

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>


<input type="text" id="gig_date_multi">

【讨论】：

虽然这似乎几乎可以工作，但代码似乎确实存在错误。如果我选择 3 个日期，然后取消选择一个，所有时间都会更改为 00:00。
@RobHughes 你是对的。抱歉耽搁了。片段更新。让我知道。谢谢
非常感谢，现在可以了。 “启用”或“禁用”功能似乎删除了所有时间数据。我之前更改了代码以使用 css 选择器隐藏和显示日期，这似乎工作正常，但我更喜欢你的代码，虽然我不明白所有这些。
@RobHughes 非常感谢。

【解决方案2】：

附带说明，如果有人想在 Flatpickr 中禁用过去的日期以及时间选择，请像这样使用 Date().getTime()：

 $("input.picker-datetime").flatpickr({
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        time_24hr: true,
        minDate: new Date().getTime()
    });

【讨论】：