Question

我可以通过以下方式禁用日期：

$('#datepicker').datepicker({
    todayHighlight: true,
    datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
});

但是根据我的用例，由于您可以按日历查看一年，因此我可以在2017年的365天中停用300天，在2016年的365天中停用200天。

我想优化，想象5年后，他可以有2500个残疾人加载日。有人知道如何动态地做这件事，我的意思是，每次改变当前月份。

或者另一种方法呢？

Answer 1

在 changeMonth ， changeYear ， changeDecade 中使用任何set *方法（例如 setDatesDisabled ）或 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);
});

Answer 2

您可以使用setDatesDisabled动态更新已停用的日期，然后您可以收听视图更改，为changeMonth，changeYear，changeDecade和changeCentury事件添加处理程序。

编辑：正如Dave Herman所述here，版本1.6.4存在错误，1.7.1已修复，您必须添加updateViewDate: false选项。

这是我的尝试（unsing getDisabledDates函数来模拟dynamc禁用日期）：

＆＃13;

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

＆＃13;

<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">

＆＃13;

Boostrap datepicker，每月动态禁用日期

2 个答案: