使用日期字符串数组在引导日期选择器中设置禁用月份不起作用

Question

我有一个具有以下配置的日期选择器：

HTML：

<div class="input-group date">
  <input type="text" id="datepick" class="form-control"/>
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-calendar"></i>
  </span>
</div>

JS：

var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
                      "2016-05-01","2016-04-01","2015-12-01","2015-09-01"];

$('#datepick').datepicker({
  format: 'yyyy-mm-dd',
  minViewMode: 1, // 1 for months
  maxViewMode: 2, // 2 for years
  startDate: '-36m',
  endDate: '+0m',
  autoclose: true,
  toggleActive: true
});

$('#datepick').datepicker('setDatesDisabled', datesToDisable);

随后，异步调用检索日期数组（此处由 datesToDisable 变量表示），使用 setDatesDisabled 方法（如代码 sn-p 的最后一行所示）传递给日期选择器，但它不起作用，因为过去日期的月份仍然可以在日历中选择。

问题：这是在引导日期选择器日历中设置禁用月份的正确方法吗？我是否需要传递一个月内的所有日期才能禁用特定月份？

你可以在下面的jsfiddle中查看：http://jsfiddle.net/javlc/52g9xcz2/

Answer 1

您可以使用日期选择器的.on("show") 函数来更改显示。我使用 jQuery 的 grep 来查找与您的 datesToDisable 数组的匹配项。如果有任何匹配项，那么我将 disabled 类应用于该元素。

var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
                      "2016-05-01","2016-04-01","2015-12-01","2015-09-01"];

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

$('#example1').datepicker({
    format: 'yyyy-mm-dd',
    minViewMode: 1, // 1 for months
    maxViewMode: 2, // 2 for years
    startDate: '-36m',
    endDate: '+0m',
    autoclose: true,
    toggleActive: true}).on("show", function(event) {

  var year = $("th.datepicker-switch").eq(1).text();  // there are 3 matches

  $(".month").each(function(index, element) {

    var el = $(element);

    var hideMonth = $.grep( datesToDisable, function( n, i ) {
                  return n.substr(0, 4) == year && months[parseInt(n.substr(5, 2)) - 1] == el.text();
                });

    if (hideMonth.length)
      el.addClass('disabled');

    /* To hide them...
    if (hideMonth.length)
      el.hide();
    */
  });
});

JsFiddle 示例：https://jsfiddle.net/k144qmct/1/

Answer 2

Bootstrap setDatesDisabled 仅接受 dates 而不是 months。我正在开发的一种解决方案如下：

首先，我们要创建一个新数组：var dates=[]。

对于 datesToDisable 数组中的每个项目，我们需要将 push 放入 dates 项目 month 中的所有日期。

var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
                  "2016-05-01","2016-04-01","2015-12-01","2015-09-01"];

例如，我们有2016-11-01。您必须从 November(11) 月份添加所有 days。

为此，我使用daysInMonth 方法来找出一个月的天数。

function daysInMonth(month,year) {
    return new Date(year, month, 0).getDate();
}

daysInMonth(2016,11,0) //30

最后一步是将pass dates 数组转换为datesDisabled 属性。

这里是working solution。