Question

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

我可以在2017年10月10日至2017年10月15日期间停用，具体如下：

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

并且该代码工作正常。

但是，如果我想在2017年10月10日至2017年10月15日以及2017年10月25日至2017年10月30日期间再次禁用该怎么办？ example my 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);
        }
    });
});

<强> Demo

如果你有很多日期范围，你可能会这样写：

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

<强> Demo

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

1 个答案: