Bootstrap Datepicker:如何设置限制以仅选择3个日期? [英] Bootstrap Datepicker: How can I set limit to select 3 dates only?

问题描述

我正在使用Bootstrap Datepicker，如何仅通过使用multidates选项来设置限制以选择最多3个日期.

I m using Bootstrap Datepicker how can i set limit to select maximum 3 dates only by using multidates option.

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

推荐答案

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

Use a variable to store selected dates array.

无论何时选择日期，都要检查日期选择器中数据的长度，如果长度大于3，请从存储的数组中进行重置并通知用户

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

});

演示

这篇关于Bootstrap Datepicker:如何设置限制以仅选择3个日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！