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

Question

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.

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

and this the fiddle

Please your suggestion..

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

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