jquerybootstrap-daterangepickerjquerydatetimepicker

How to check if a disabled date is in the selected range


I want to check if there a disabled date inside a selected date range

I can disable specific date, there can me multiple dates.

But don't have any idea how to restrict user from selecting a range where a disable date in it.

for say if 4th july 2019 is disabled, restrict user to select 3-july-2019 to 9-july-2019

$(document).ready(function() {
  $('.date_rangepicker').daterangepicker({
    timePicker: false,
    locale: {
      format: 'YYYY/MM/DD'
    },
    isInvalidDate: function(date) {
      if(date.format('YYYY/MM/DD') == '2019/07/04') {
        return true;
      }else{
        return false; 
      }
    }
  }, function(start, end, label) {
    console.log(start.toISOString(), end.toISOString(), label);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

 <input type="text" class="date_rangepicker"/>


Solution

  • I have extended the functionalities for daterangepicker. you can check the extended daterangepicker plugin from here https://pastebin.com/4SKPTT7P

    You can use that by bellow code through this you can make multiple date disable / invalid and user can't select a date range with an invalid date inside.

            $(document).ready(function() {
                $('.date_rangepicker').daterangepicker({
                    timePicker: false,
                    locale: {
                        format: 'YYYY/MM/DD'
                    },
                    invalidDates: ['2019/07/01', '2019/07/02', '2019/07/03'],
                }
                );
            });