Bootstrap datepicker,每月动态禁用日期
Boostrap datepicker, disabled dates dynamically each month
我可以禁用日期:
$('#datepicker').datepicker({
todayHighlight: true,
datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
});
但是对于我的用例,由于您可以按日历查看一年,我可以在 2017 年的 365 天中有 300 天禁用,在 2016 年的 365 天中有 200 天禁用。
我要优化,想象一下,5年后,他可以有2500个残障日来加载。
有人知道如何动态地做到这一点,我的意思是,每次更改当前月份。
或者其他方法?
您可以使用 setDatesDisabled
and you can listen to view changes adding handler for changeMonth
, changeYear
, changeDecade
and changeCentury
事件动态更新禁用日期。
编辑: 正如 Dave Herman 所述 , there was a bug with version 1.6.4
fixed with 1.7.1
and you have to add updateViewDate: false
选项。
这是我的尝试(取消 getDisabledDates
函数来模拟动态禁用日期):
function getDisabledDates(month){
if( month<0 || month>12){
return [];
}
var disabled = [
['01/01/2017', '01/02/2017', '01/03/2017'],
['02/04/2017', '02/05/2017', '02/06/2017'],
['03/08/2017', '03/09/2017', '03/10/2017'],
['04/05/2017', '04/06/2017', '04/07/2017'],
['05/15/2017', '05/16/2017', '05/17/2017'],
['06/11/2017', '06/12/2017', '06/13/2017'],
['07/15/2017', '07/16/2017', '07/17/2017'],
['08/07/2017', '08/08/2017', '08/09/2017'],
['09/05/2017', '09/06/2017', '09/07/2017'],
['10/11/2017', '10/12/2017', '10/13/2017'],
['11/06/2017', '11/07/2017', '11/08/2017'],
['12/13/2017', '12/14/2017', '12/15/2017'],
];
return disabled[month];
}
$('#datepicker').datepicker({
todayHighlight: true,
updateViewDate: false,
//datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var disabled = getDisabledDates(month);
$('#datepicker').datepicker('setDatesDisabled', disabled);
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
在 changeMonth、changeYear[=22= 中使用任何 set* 方法(例如 setDatesDisabled) ], changeDecade 或 changeCentury 事件将触发更新,这将使选择器恢复到当前查看日期所在的月份。
为防止这种情况发生,您只需启动选择器并将 updateViewDate 选项设置为 false。
$('#datepicker').datepicker({
todayHighlight: true,
updateViewDate: false,
//datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var disabled = getDisabledDates(month);
$('#datepicker').datepicker('setDatesDisabled', disabled);
});
我可以禁用日期:
$('#datepicker').datepicker({
todayHighlight: true,
datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
});
但是对于我的用例,由于您可以按日历查看一年,我可以在 2017 年的 365 天中有 300 天禁用,在 2016 年的 365 天中有 200 天禁用。
我要优化,想象一下,5年后,他可以有2500个残障日来加载。 有人知道如何动态地做到这一点,我的意思是,每次更改当前月份。
或者其他方法?
您可以使用 setDatesDisabled
and you can listen to view changes adding handler for changeMonth
, changeYear
, changeDecade
and changeCentury
事件动态更新禁用日期。
编辑: 正如 Dave Herman 所述 1.6.4
fixed with 1.7.1
and you have to add updateViewDate: false
选项。
这是我的尝试(取消 getDisabledDates
函数来模拟动态禁用日期):
function getDisabledDates(month){
if( month<0 || month>12){
return [];
}
var disabled = [
['01/01/2017', '01/02/2017', '01/03/2017'],
['02/04/2017', '02/05/2017', '02/06/2017'],
['03/08/2017', '03/09/2017', '03/10/2017'],
['04/05/2017', '04/06/2017', '04/07/2017'],
['05/15/2017', '05/16/2017', '05/17/2017'],
['06/11/2017', '06/12/2017', '06/13/2017'],
['07/15/2017', '07/16/2017', '07/17/2017'],
['08/07/2017', '08/08/2017', '08/09/2017'],
['09/05/2017', '09/06/2017', '09/07/2017'],
['10/11/2017', '10/12/2017', '10/13/2017'],
['11/06/2017', '11/07/2017', '11/08/2017'],
['12/13/2017', '12/14/2017', '12/15/2017'],
];
return disabled[month];
}
$('#datepicker').datepicker({
todayHighlight: true,
updateViewDate: false,
//datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var disabled = getDisabledDates(month);
$('#datepicker').datepicker('setDatesDisabled', disabled);
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
在 changeMonth、changeYear[=22= 中使用任何 set* 方法(例如 setDatesDisabled) ], changeDecade 或 changeCentury 事件将触发更新,这将使选择器恢复到当前查看日期所在的月份。
为防止这种情况发生,您只需启动选择器并将 updateViewDate 选项设置为 false。
$('#datepicker').datepicker({
todayHighlight: true,
updateViewDate: false,
//datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
}).on('changeMonth', function(e){
var month = e.date.getMonth();
var disabled = getDisabledDates(month);
$('#datepicker').datepicker('setDatesDisabled', disabled);
});