Deaktivieren Sie einige Datumsbereiche in Bootstrap-Datepicker

Question

Ich versuche, einige Datumsbereichsarrays mithilfe von BeforeShowDay-Funktion in Bootstrap-Datepicker zu deaktivieren.

Ich habe einen solchen 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; 
       }); 
      } 
     }); 

Aber Looping das Array mit Daten nicht funktioniert und ich habe keine deaktiviert Termine.

Wie kann ich 2,3 oder mehr Arrays mit Daten deaktivieren?

Danke.

Answer 1

Anstelle von jQuery.each können Sie jQuery.inArray verwenden.

Um den Datumsparameter in das Format 'yy-mm-dd' zu konvertieren, können Sie moment.js verwenden.

Das 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>