Bootstrap Datepicker: Comment puis-je définir une limite pour sélectionner 3 dates seulement?

Question

Lorsque j'utilise Bootstrap Datepicker, comment puis-je définir une limite pour sélectionner 3 dates maximum uniquement en utilisant l'option multidates?

var todayDate = moment().format('mm-dd-yyyy'); 
dp = $("#leaveDatePicker").datepicker({ 
    format    : "mm-dd-yyyy", 
    multidate   : true, 
    inline    : true, 
    todayHighlight  : false, 
    daysOfWeekDisabled : [0], 
    startDate   : 'today', 
    beforeShowDay  : function(date){ 
     var d   = date; 
     var curr_month = d.getMonth() + 1; //Months are zero based 
     if(curr_month < 10) 
      curr_month = '0'+curr_month; 
     var formattedDate = curr_month + "-" + d.getDate() + "-" +d.getFullYear() 
     if ($.inArray(formattedDate, myActiveDates) != -1){     
      return { 
       classes: 'active' 
      }; 
     } 
     return [true,""]; 
    } 
}); 
dp.data('datepicker').setDates($('input#datestring').val().split(',')); 
dp.on('changeDate', function (e){ 
    $('input#datestring').val($(this).data('datepicker').getFormattedDate()); 
}); 

Answer 1

Utilisez une variable pour stocker le tableau de dates sélectionnées.

Chaque fois que les dates sont sélectionnées vérifier la longueur des données dans le datepicker et si elle est plus de 3 faire une remise à zéro du tableau stocké et Aviser l'utilisateur

var selectedDates = []; 
dp.on('changeDate', function(e) { 

    if (e.dates.length < 4) { 
    // store current selections 
    selectedDates = e.dates 
    } else { 
    // reset dates if 4th selected 
    dp.data('datepicker').setDates(selectedDates); 
    alert('Can only select 3 dates') 
    } 

}); 

DEMO