Question

我使用Bootstrap Datepicker如何设置限制，仅使用multidates选项选择最多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

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

每当选择日期时，检查日期选择器中的数据长度，如果超过3，则从存储的数组中重置并通知用户

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

无需执行任何其他代码即可为多个日期选择设置限制。只需将 multidate 选项设置为您要设置为多个日期限制的任何数字即可。参见下面的示例，您最多只能选择三个日期。

示例

$("#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：如何设置限制以仅选择3个日期？

2 个答案: