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.

Answer 1

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>