Bootstrap Datepicker：如何将限制设置为 select 3 个日期？

Question

我正在使用 Bootstrap Datepicker 如何通过使用 multidates 选项将限制设置为 select 最多 3 个日期。

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

使用变量存储选定的日期数组。

Whenever dates are selected check the length of the data in the datepicker and if it is more than 3 do a reset from the stored array and notify user

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

Answer 2

无需执行任何额外代码来设置多个日期的限制 selection。只需将 multidate 选项设置为您想要设置为多个日期限制的任何数字。请参阅下面的示例，您最多只能 select 三个日期。

例子

$("#Txt_Date").datepicker({
    format: 'd-M-yyyy',
    inline: false,
    lang: 'en',
    step: 5,
    multidate: 3,
    closeOnDateSelect: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>


<input type="text" id="Txt_Date" placeholder="Choose Date" style="cursor: pointer;">

Bootstrap Datepicker：如何将限制设置为 select 3 个日期？

Bootstrap Datepicker: How can I set limit to select 3 dates only?

jquery

bootstrap-datepicker