Question

我想开发一个日期选择器，我们可以在 minDate 和 maxDate 之间选择多个随机日期，但是对于 minDate 和 maxDate，multidate 不起作用。

$('.date').datepicker({
    multidate: true,
    minDate: -3,
    maxDate: 2
});

$('.date').datepicker('setDates', [new Date(2014, 2, 5), new Date(2014, 3, 5)])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.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"/>

Answer 1

minDate 和 maxDate 在 Bootstrap-datepicker 中不存在，但在另一个插件 jquery Datepicker 中，

因此要在 bootstrap-datepicker 中使用相同的逻辑，您必须使用选项 startDate 和 endDate。

所以 minDate:-3 变成 startDate: new Date(new Date().setDate(new Date().getDate() - 3))

然后maxDate:2变成endDate: new Date(new Date().setDate(new Date().getDate() + 2))

$('.date').datepicker({
    multidate: true,
    startDate: settingDate(-3),
    endDate: settingDate(+2)
});

/* if you want to change the start and end Date (MM,DD,YYYY)
  $('.date').datepicker('setStartDate', "04/14/2020");
  $('.date').datepicker('setEndDate', "05/10/2020");
*/


function settingDate(num){
  return new Date(new Date().setDate(new Date().getDate() + num))
}

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

<div class="input-group date" data-provide="datepicker">
  <input type="text" class="form-control">
  <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

这是当前日期的示例，但您可以根据所选日期进行调整。

在这种情况下，您必须使用方法：setStartDate 和 setEndDate（请参阅 THAT）来设置其他限制以选择日期..

Datepicker：MultiDate 不适用于 maxDate 和 minDate

1 个答案: