引导日期选择器，每月动态禁用日期

Posted 2023-05-07

【中文标题】引导日期选择器，每月动态禁用日期

【英文标题】：Boostrap datepicker, disabled dates dynamically each month

【发布时间】：2017-08-23 06:26:28

【问题描述】：

我可以禁用日期：

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

但对于我的用例，由于您可以按日历计算一年，因此我可以在 2017 年的 365 天中拥有 300 天的禁用天数，在 2016 年的 365 天中拥有 200 天的禁用天数。

我想优化，想象一下 5 年后，他可以有 2500 天的残障时间来加载。 有人知道如何动态地做到这一点，我的意思是，每次更改当前月份。

或者其他方式来做到这一点？

【参考方案1】：

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

【参考方案2】：

您可以使用setDatesDisabled 动态更新禁用的日期，并且您可以收听视图更改添加changeMonth、changeYear、changeDecade 和changeCentury 事件的处理程序。

编辑：正如 Dave Herman 所说的 here，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">

【讨论】：

我不知道 setDatesDisabled，感谢您的解决方案，它看起来很完美，但为什么我不能更改月份？在你的 sn-p 和我的项目上，-> 通过箭头更改月份，它保持在三月 -> 通过单击月份来更改日期，它保持在三月

@xif 谢谢你指出，我没注意到。似乎问题在于在changeMonth 处理程序中使用datepicker methods 之一。也许这是日期选择器的错误，我会尝试进一步调查。

我已经发布了another question（引用这个）希望得到一个答案，以了解为什么changeMonthlistner 中的setDatesDisabled（和其他setter）会导致问题。

我已将我的答案更新为 1.7.1（1.6.4 中存在错误）并在 Dave Herman answer 之后将 updateViewDate: false 添加到我的相关问题中。现在一切正常。