Отключить несколько диапазонов дат в Bootstrap-datepicker

Question

Я пытаюсь отключить несколько массивов диапазонов дат с использованием функции BeforeShowDay в Bootstrap-Datepicker.

У меня есть такой код:

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

Но зацикливание массив с датами не работает, и у меня нет даты отключены.

Как отключить 2,3 или более массивов с датами?

Спасибо.

Answer 1

Вместо jQuery.each вы можете использовать jQuery.inArray.

Для того, чтобы преобразовать параметр даты в формат 'yy-mm-dd', вы можете использовать moment.js.

Сниппет:

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>