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