2

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"/>
R.J. Dunnill
  • 2,049
  • 3
  • 10
  • 21
Rashed Ehsan
  • 119
  • 6
  • Kind of a difficult one. I don't think there is a built in event for detecting when a data is selected, I saw someone mention something about modifying the js file to do that. Seems like you have to detect when the user selects a date, and then update / redraw the calendar to black out all dates prior to the nearest prior blacked out date and all dates after the nearest following blacked out date (inclusive). The problem with the function(start,end,label) seems to be that it only fires with the the apply button ? This might help. https://github.com/dangrossman/daterangepicker/issues/800 – SScotti Jul 12 '19 at 03:18

1 Answers1

2

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'],
            }
            );
        });
ABTanjir
  • 126
  • 5