Datepicker:MultiDate 不适用于 maxDate 和 minDate
Datepicker : MultiDate doesn't work with maxDate and minDate
我想开发一个日期选择器,我们可以在其中 select 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"/>
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>
这是当前日期的示例,但您可以在 selected 之后进行调整。
在这种情况下,您必须使用方法:setStartDate
和 setEndDate
(参见 THAT)将其他限制设置为 select 日期..
我想开发一个日期选择器,我们可以在其中 select 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"/>
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>
这是当前日期的示例,但您可以在 selected 之后进行调整。
在这种情况下,您必须使用方法:setStartDate
和 setEndDate
(参见 THAT)将其他限制设置为 select 日期..