Question

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

Jquery的：

function doSelect(text) {
  return $(".infobox th").filter(function() {
    return $(this).text() === text;
  });
}

countryLinks = doSelect("Location").siblings('td')
.find('a').map(function(i, el) {return el.href}).get(); // .attr('href');

// we can pass this function to `.forEach()` or `.map()`
function countryList(string) {
  let pattern = new RegExp('^.+\/wiki\/'); // adjust `RegExp`
  // string = countryLinks;
  countryListLinks = string.replace(pattern, '');
  console.log(countryListLinks);
}

// the second condition is `false` given HTML at Question
if (doSelect('Location').length > 0 /* && doSelect('Date').length > 0 */) {
  countryLinks.forEach(countryList);
};

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

Flatpickr有一个<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="infobox"> <tr> <th style="padding-right:1em">Location</th> <td> <span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span> </td> </tr> </table>和$('#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("")); } });函数，但我不确定如何将它集成到代码中...我是一个jquery初学者。

文档显示了这两种方法;

disable

和

enable

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

摘录：

$('#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 = FlatpickrInstance.prototype.formatDate(ele, "d/m/Y");
            acc = (acc == '') ? str : acc + ';' + str;
            return acc;
        }, '');
        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;
            }
        }]);
    }
});

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">

Answer 2

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

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

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

2 个答案: