使用日期字符串数组的引导datepicker设置禁用的月份不起作用 [英] Set disabled months in bootstrap datepicker using array of date strings is not working

问题描述

我有一个datepicker，具有以下配置：

I have a datepicker which has the following configuration:

HTML：

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 方法（如代码片段的最后一行所示）传递给datepicker，但不是工作，因为传递日期的月份仍然可以在日历中选择。

Then later an async call retrieves an array of dates (here represented by the datesToDisable variable) which are passed to the datepicker using the setDatesDisabled method (as indicated on the last line of the code snippet), but it is not working, as the months for the passed dates are still selectable within the calendar.

问题：这是在引导日期戳记日历中设置残疾月份的正确方法吗？我需要在一个月内通过所有日期以禁用特定的月份？

Questions: Is this the correct way to set disabled months in the bootstrap datepicker calendar? Will I need to pass all dates within a month to disable a particular month?

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

You can check it in the following jsfiddle: http://jsfiddle.net/javlc/52g9xcz2/

推荐答案

您可以使用datepicker的 .on（show）函数来更改显示。我使用jQuery的 grep 来查找与 datesToDisable 数组的匹配项。如果有任何比赛，那么我将禁用类应用到该元素。

You can use the datepicker's .on("show") function to alter the display. I've used jQuery's grep to find matches with your datesToDisable array. If there are any matches then I apply the disabled class to that element.

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/

JsFiddle example: https://jsfiddle.net/k144qmct/1/

这篇关于使用日期字符串数组的引导datepicker设置禁用的月份不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！