Disable date ranges using bootstrap-datepicker?

问题

How can I disable multiple date ranges? using bootstrap-datepicker

Currently this is my code on how to disable dates specifically.

  <div id="input-daterange" class="input-group input-daterange" data-date-format="M d, yyyy">
                                <input type="text" id="starts_at" name="starts_at" class="form-control text-center" placeholder="Arrival:" value="{{ $property_request->starts_at != '' ? date('M j, Y',strtotime($property_request->starts_at)) : '' }}">
                                <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
                                <input type="text" id="ends_at" name="ends_at" class="form-control text-center" placeholder="Departure:" value="{{ $property_request->ends_at != '' ? date('M j, Y',strtotime($property_request->ends_at)) : '' }}">
                            </div>
    var date = new Date();
    var arrayDates = ['May 20, 2020','May 23, 2020'];
    $('#input-daterange').datepicker({
        todayHighlight: true,
        autoclose: true,
        format: "M d, yyyy",
        clearBtn : true,
        datesDisabled: arrayDates,
        startDate : date
    });

As you notice, May 20, 2020 and May 23, 2020 are placed inside the array.

and these 2 dates is being disabled. But May 22, 2020 and May 21, 2020 are not being disabled since that way of code is disabling dates specifically

But what I'm trying to do is to disable dates between date ranges.

So if I have 3 different date ranges

May 20, 2020 to May 23, 2020

May 24, 2020 to May 26, 2020

May 27, 2020 to May 29, 2020

This should be disables the date ranges.

The reason why I'm doing this is because I have multiple rows of date range from db

something like this: (These dates will be converted to M j, Y format using php disregard the date format of json)

{
   "starts_at": "2020-05-20",
   "ends_at": "2020-05-23"
},
{
   "starts_at": "2020-05-24",
   "ends_at": "2020-05-26"
},
{
   "starts_at": "2020-05-27",
   "ends_at": "2020-05-29"
}

In addition I tried to based here but ain't helping

Disable few date ranges in Bootstrap-datepicker

This is the plugin that Im using

https://bootstrap-datepicker.readthedocs.io/en/latest/

来源：https://stackoverflow.com/questions/61762635/disable-date-ranges-using-bootstrap-datepicker

标签

html