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..

Mosh Feu · Accepted Answer · 2017-09-07T05:46:45.533

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

I have problem sir with your code, if I selecting date range not until 30 days show message error, but if I more than 30 days no message error although there have disable date. example : i have disable date in 5 Dec 2017 - 10 Dec 2017, then I selecting from 25 Nov 2017 until 23 Dec 2017 will be show message error, but I selecting from 25 Nov - 25 Dec No message error show.. please your suggestion.. thanks — travsyst travsyst, Sep 06 '17 at 02:46
Thanks again sir.. your very cool.. thankyou so much for your help to me.. — travsyst travsyst, Sep 06 '17 at 05:16
hello sir.. im sory have error again using your code, example start': moment('2017-10-10'), 'end': moment('2017-10-15') but if selecting in range 2017-10-8 - 2017-10-9 will be show message error ? — travsyst travsyst, Sep 06 '17 at 22:55
My bad. I added a day to the tempDate before I check if current tempDate it invalid. — Mosh Feu, Sep 07 '17 at 05:47
Helllo sir.. I already fix that problem.just change <= into < only. Can you help me , how I can change format date? I want change into DD/MM/YYYY ? Thanks — travsyst travsyst, Sep 07 '17 at 06:16

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

1 Answers1

Linked