防止用户选择在两个日期之间存在禁用日期的日期范围 [英] prevent user selecting date range in which there is a disabled date in between

问题描述

我知道我的问题已经回答了

I know my question already answer like this, but I still confused with that code.

我只希望用户不能选择选择禁用日期之间的日期范围，这是我的日期范围选择器，因此，如果用户选择了禁用日期，则会显示错误或通知信息.

I just want user cannot choose selecting date range which there is disabled date between, this is screenshoot my date range picker , so if user selecting with disable date then show error or notification information.

这是我的JavaScript

and this my 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);
    }
  });
});

和这个小提琴

请提出您的建议.

推荐答案

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

You can check for each date in the selected range if it invalid. If so, show a message. Like this:

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，输出

这篇关于防止用户选择在两个日期之间存在禁用日期的日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！