Disable few date ranges in Bootstrap-datepicker

Question

I'm trying to disable few date range arrays using BeforeShowDay fucntion in Bootstrap-Datepicker.

I have such code:

 var dateArray2 = getDates(new Date("2016-12-20 14:57:28"), (new Date("2016-12-22 14:57:28")).addDays(0)); var dateArray3 = getDates(new Date("2016-12-22 14:57:28"), (new Date("2016-12-25 14:57:28")).addDays(0)); var dateArr = new Array(); dateArr.push(dateArray2); dateArr.push(dateArray3); //Datepicker init $('.date').datepicker({ format: 'dd-mm-yyyy', startDate: date, autoclose: true, beforeShowDay: function (date) { var string = jQuery.datepicker.formatDate('yy-mm-dd', date); $.each(dateArr,function (key, value) { return value.indexOf(string) == -1; }); } });

But looping the array with dates not working and I have no dates disabled.

How can I disable 2,3 or more arrays with dates?

Thanks.

please add your working fiddle

ScanQR
– ScanQR

2016-12-17 14:07:29 +00:00
Commented Dec 17, 2016 at 14:07 — ScanQR
– ScanQR, Commented Dec 17, 2016 at 14:07

gaetanoM · Accepted Answer · 2016-12-17 14:38:13Z

Instead of jQuery.each you may use jQuery.inArray.

In order to convert the date parameter to the format 'yy-mm-dd' you can use moment.js.

The snippet:

var date = new Date(); var forbiddeneDates = ['16-12-18','16-12-19','16-12-20']; $('.date').datepicker({ format: 'dd-mm-yyyy', startDate: date, autoclose: true, beforeShowDay: function (date) { var dateStr = moment(date).format('YY-MM-DD'); return $.inArray(dateStr,forbiddeneDates) == -1; } });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> <div class="input-group date"> <input type="text" class="form-control"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div>

thanks, I also find a solution - I just create on big array from my arrays getted from Database using this: var dateArr = [].concat.apply([], arr);

Collectives™ on Stack Overflow

Disable few date ranges in Bootstrap-datepicker

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related