Boostrap 日期选择器，每个月动态禁用日期

Question

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

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

但是对于我的使用情况来说，由于可以按照日历超过一年，我可以在2017年中有365天中的300天是禁用的，并且在2016年中有365天中的200天是禁用的。

我想要进行优化，想象一下5年后，他可能会有2500个禁用天数需要加载。有人知道如何动态地实现这一点吗？也就是说，每次更改当前月份时。

或者有其他方法吗？

- xif

Answer 1

使用任何setDatesDisabled方法（例如，在changeMonth、changeYear、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);
});

- Dave Herman

Answer 2

你可以使用 setDatesDisabled 动态更新禁用日期，同时你可以通过添加事件处理程序来监听视图更改，这些处理程序包括 changeMonth、changeYear、changeDecade 以及 changeCentury。

编辑：正如Dave Herman在这里所述，版本1.6.4存在一个错误，在1.7.1中已经修复，并且您必须添加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">

- VincenzoC

---

我不知道setDatesDisabled，谢谢你提供的解决方案，看起来很完美，但是为什么我不能改变月份呢？ 在你的代码片段和我的项目中， -> 通过箭头更改月份，它仍然停留在三月 -> 通过单击月份更改日期，它仍然停留在三月 - xif

@xif 谢谢你指出这个问题，我没有注意到它。看起来问题是在changeMonth处理程序中使用了datepicker的一个方法。也许这是datepicker的一个bug，我会进一步调查。 - VincenzoC

我已经发布了另一个问题（参考此问题），希望能得到答案，以了解为什么在changeMonth监听器内部的setDatesDisabled（和其他设置器）会导致问题。 - VincenzoC

我已经编辑了我的答案，将datepicker版本更新为1.7.1（1.6.4中存在一个错误），并在Dave Herman的答案之后添加了updateViewDate: false到我的相关问题。现在一切都正常工作。 - VincenzoC