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

Solution 1:

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

functionisInvalidDate(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 = newDate(start);
    var endDate = newDate(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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><scriptsrc="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script><scriptsrc="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script><linkhref="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"rel="stylesheet" /><inputtype="text"id="daterange"value="10/01/2017 - 11/01/2017" />

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