JQuery UI Datepicker在选择时禁用月份答案

【问题标题】：JQuery UI Datepicker Disable Month on SelectJQuery UI Datepicker在选择时禁用月份
【发布时间】：2017-05-11 20:04:07
【问题描述】：

我有一个日期选择器分配给几个字段，其中一组特定日期已在我的 beforeShowDay 属性中禁用。

.datepicker({ beforeShowDay: disablePaymentDates, minDate: 0, maxDate: afterSixMonths });

我正在尝试禁用用户在所有日期选择器中选择的日期月份。有没有办法做到这一点？

【问题讨论】：

什么是“disablePaymentDates”？数组？它应该是一个以日期为参数的函数。 api.jqueryui.com/datepicker/#option-beforeShowDay
它是一个以 mm/dd 格式保存日期的数组。

标签： jquery jquery-ui datepicker

【解决方案1】：

如datepicker API中所示：

演出前

类型：函数（日期日期）

默认值：空

一个以日期为参数的函数，必须返回一个数组：

[0]：true/false 表示此日期是否可选 [1]：要添加到日期单元格的 CSS 类名称或“”默认演示[2]：此日期的可选弹出工具提示

日期选择器中的每一天都会在显示之前调用该函数。

.datepicker({
    minDate: 0, 
    maxDate: afterSixMonths,
    beforeShowDay: function(date) {
        var dd = date.getDate();
        if ($.inArray( dd, disablePaymentDates)!= -1) {
            return [false, "", "disabled" ];
        } else {
            return [true, "", "enabled" ];
        }
    }
});

【讨论】：

那么我是否必须将日期选择器重新应用于所有元素才能在选择日期时禁用月份？
您可以在函数中添加任何您想要的内容...禁用一周中的某些天、当前月份等。您在函数中接收日期，检查有效性，并返回三个值。这只是一个使用示例。

【解决方案2】：

我想出了一个类似于 Roetnig 的解决方案。我在 beforeShowDay 属性调用的函数中添加了以下代码。

var monthsToDisable= [];
if ($.inArray(date.getMonth(date), monthsToDisable) > -1) {
    $return = false;
    $returnclass = "unavailable";
}

然后我用适当的月份 (0-11) 填充“monthsToDisable”。由于该数组将根据用户操作进行更新，因此我只需在更新数组后重新应用日期选择器即可。

【讨论】：

【解决方案3】：

或者您可以使用 moment.js 禁用日期范围

var disableRangeStartDate = '2017-10-29';
var disableRangeEndDate = '2018-04-18';

.datepicker({
isInvalidDate: function(arg){
      var thisMonth = arg._d.getMonth()+1;
      if (thisMonth<10){thisMonth = "0"+thisMonth;}
      var thisDate = arg._d.getDate();
      if (thisDate<10){thisDate = "0"+thisDate;}
      var thisYear = arg._d.getYear()+1900;
      var thisCompare = thisYear +"-"+ thisMonth +"-"+ thisDate;

     return moment(thisCompare).isBetween(disableRangeStartDate, disableRangeEndDate);
      }
});

【讨论】：