2

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 });

enter image description here

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/

Improve this question
7
  • have you tried ['2020-05-20','2020-05-21'] instead of var arrayDates = ['May 20, 2020','May 21, 2020']? Commented May 12, 2020 at 21:55
  • Disabling dates specifically is working fine as stated above. My preferred date format is M j, Y tried also to change the date format like that and didn't work/ Commented May 12, 2020 at 21:58
  • 1
    The documentation says datesDisabled is how it's done. Also, when comparing dates, it's best to use YMD. It's the simplest. m j, Y Preference is good for display & what the user sees, but there is no better way to compare dates YMD. Commented May 12, 2020 at 22:51
  • can u enlighten me on dateDisabled I know how to use it for specific dates but not on the multiple date ranges Commented May 12, 2020 at 23:18
  • 1
    You're looking to disable the dates between the selected dates correct? So in your example using, May 20, 2020 to May 23, 2020, you want to also disable May 21st and May 22nd, right? I assume each of these user selections creates an array with the start and finish date right? Commented May 12, 2020 at 23:43
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.