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

2024-05-17

我有一个日期选择器,其配置如下:

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方法(如代码片段最后一行所示),但它不起作用,因为传递日期的月份仍然可以在日历中选择。

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

您可以在下面的jsfiddle中检查它:http://jsfiddle.net/javlc/52g9xcz2/ http://jsfiddle.net/javlc/52g9xcz2/


您可以使用日期选择器.on("show")功能来改变显示。我用过 jQuerygrep找到与您的匹配项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/ https://jsfiddle.net/k144qmct/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐