如何在日期范围选择器中使用isInvalidDate禁用多个日期

Question

我想在日期范围选择器中禁用多个日期。

我可以从2017年10月10日到2017年10月15日停用，如下所示：

var cekA = document.getElementById('HF_StartDateBlockMasterPage').value;
var cekB = document.getElementById('HF_EndDateBlockMasterPage').value;

$('#daterange').daterangepicker({
    isInvalidDate: function (date) {
        var formatted = date.format('YYYY-MM-DD');
        if (date >= moment(cekA) && date <= moment(cekB)) {
            return true;
        }
    }
});

该代码工作正常。

但是，如果我想在2017年10月10日至2017年10月15日以及从2017年10月25日至2017年10月30日再次禁用，该怎么办？ 例子我的HTML

Answer 1

您只需要向isInvalidDate回调添加更多条件，每个条件代表要禁用的日期或日期块。

例如，您可以编写：

jQuery(function($) {
    var a = moment("2017-10-10");
    var b = moment("2017-10-15");
    var x = moment("2017-10-25");
    var y = moment("2017-10-30");
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            if (date >= a && date <= b) {
                return true;
            }
            if(date >= x && date <= y) {
                return true;
            }
            return false;
        }
    });
});

或简化：

jQuery(function($) {
    var a = moment("2017-10-10");
    var b = moment("2017-10-15");
    var x = moment("2017-10-25");
    var y = moment("2017-10-30");
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            return (date >= a && date <= b) || (date >= x && date <= y);
        }
    });
});

演示版

如果您有许多日期范围，则可以这样写：

jQuery(function($) {
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            var dateRanges = [
                { 'start': moment('2017-10-10'), 'end': moment('2017-10-15') },
                { 'start': moment('2017-10-25'), 'end': moment('2017-10-30') },
                { 'start': moment('2017-11-10'), 'end': moment('2017-11-15') },
                { 'start': moment('2017-11-25'), 'end': moment('2017-11-30') },
                { 'start': moment('2017-12-10'), 'end': moment('2017-12-15') },
                { 'start': moment('2017-12-25'), 'end': moment('2017-12-30') },
                { 'start': moment('2018-01-10'), 'end': moment('2018-01-15') },
                { 'start': moment('2018-01-25'), 'end': moment('2018-01-30') },
                { 'start': moment('2018-02-10'), 'end': moment('2018-02-15') },
                { 'start': moment('2018-02-25'), 'end': moment('2018-02-30') }
            ];
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= range.start && date <= range.end);
            }, false);
        }
    });
});

演示版