防止用户选择中间有禁用日期的日期范围

Question

我知道我的问题已经回答 like this，但我仍然对那个代码感到困惑。

我只希望用户不能选择有禁用日期的日期范围，这是screenshoot my date range picker，所以如果用户选择禁用日期然后显示错误或通知信息。

这是我的 javascript

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

和这个the fiddle

请多多指教..

Answer 1

您可以检查所选范围内的每个日期是否无效。如果是这样，请显示一条消息。像这样：

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

function isInvalidDate(date, log) {
  return dateRanges.reduce(function(bool, range) {
//     if (log && date >= range.start && date <= range.end) {
//       console.log(date, range);
//     }
    return bool || (date >= range.start && date <= range.end);
  }, false);
}

jQuery(function($) {
  $("#daterange").daterangepicker({
    isInvalidDate: isInvalidDate
  }, function(start, end, label) {
    var temp = new Date(start);
    var endDate = new Date(end);
    var invalid = false;
    while (temp.getTime() < endDate.getTime()) {
      if (isInvalidDate(temp, true)) {
        invalid = true;
      }
      temp.setDate(temp.getDate() + 1);
    }
    
    if (invalid) {
      alert('invalid')
    }
  });
});

.disabled {
  color: #cecece;
}

#picker {
  width: 12em;
  margin: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

<link href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet" />
<input type="text" id="daterange" value="10/01/2017 - 11/01/2017" />

http://jsbin.com/gifiza/edit?html,css,js,output

防止用户选择中间有禁用日期的日期范围

prevent user selecting date range in which there is a disabled date in between

javascript

jquery

date

datepicker

daterangepicker