使用多日期日期选择器限制选定日期答案

【问题标题】：Limit selected dates using Multi-Dates datepicker使用多日期日期选择器限制选定日期
【发布时间】：2020-01-04 09:44:24
【问题描述】：

我只想将要选择的日期限制为 3 个日期。我正在使用 bootstrap4 多日期

我尝试了这个，但我似乎无法让它工作 (Bootstrap Datepicker: How can I set limit to select 3 dates only?)

这是我的原始代码：

 <input type="text" placeholder="RESERVATION DATE" class="form-control datepicker">

 <script>
 var datesForDisable = ["9 1 2019","9 2 2019","9 3 2019"]
 var today = new Date();
 var dd = String(today.getDate()).padStart(2, '0');
 var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
 var yyyy = today.getFullYear();

 $("input").datepicker({
         format: 'MM d, yyyy',
         autoclose: true,
         weekStart: 1,
         // calendarWeeks: true,
         todayHighlight: true,
         datesDisabled: datesForDisable,
         clearBtn: true,
         multidate: true,
         multidateSeparator: " , ",
         startDate: today,

         })
 </script>

我希望用户能够选择最多 3 个日期并能够将这 3 个日期分别保存在数据库中

【问题讨论】：

标签： jquery bootstrap-4 datepicker

【解决方案1】：

我建议在这种情况下使用弹出式选择。它也更加用户友好和更快地选择。

【讨论】：

【解决方案2】：

如果您使用的是boostra4 and tempusdominus，则不再有 changeDate 事件或用于限制最大日期数的属性。

相反，您可以使用 change.datetimepicker event 和 date, [newDate] 选项来限制您可以选择的最大日期数。

sn-p：

var datesForDisable = [moment("30/09/2019", "DDMMYYYY"), moment("29/09/2019", "DDMMYYYY"), moment("28/09/2019", "DDMMYYYY")];
$('#datetimepicker2').datetimepicker({
    allowMultidate: true,
    format: 'MMM Do, YYYY',
    multidateSeparator: ',',
    disabledDates: datesForDisable,
    calendarWeeks: true,
    buttons: {
        showToday: true,
        showClear: false,
        showClose: true
    }
});
$('#datetimepicker2').on('change.datetimepicker', function (e) {
    if (e.date != false && $(this).datetimepicker('date').split(',').length > 3) {
        $(this).find('td.day.active:contains(' + moment(e.date).format("D") + ')').trigger('click');
    }
});

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: fit-content !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" >


<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group-append date" id="datetimepicker2" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" value=""/>
                    <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：