在angular-ui-bootstrap（v.0.10.0）Datepicker中-如何按日期（或日期数组）禁用单日？

Question

我到处搜索的时间超过了我愿意承认的时间，因此找不到该问题的答案。 这里的文档-http: //angular-ui.github.io/bootstrap/#/datepicker-说...

date-disabled (date, mode)

（默认值：null）：一个可选表达式，用于根据通过日期和当前模式（天|月|年）禁用可见选项。

---

并且在HTML标记中，所有示例都在代码中将其作为输入的属性来显示...

date-disabled="disabled(date, mode)"

我需要知道在JavaScript中做什么才能使其真正起作用。 非常感谢您提供一天的示例以及传递日期数组的示例。

提前致谢...

Answer 1

的标记

date-disabled="disabled(date, mode)"

意味着在您的范围内，您将需要有一个名为disabed的函数，该函数接受两个参数date和mode ，用于确定是否应禁用该日期。

这是一个更清晰的示例。 使标记成为

date-disabled="shouldDateBeDisabled(date, mode)"

然后，在Controller中，您需要将一个名为shouldDateBeDisabled的函数shouldDateBeDisabled到放置逻辑的$scope上。

var datesAreEqual = function(date1,date2) {...};
var dateIsInArray = function(date,arrayOfDates) {...};
var someSingleDateToDisable = ...;
var arrayOfDatesToDisable = [...];
$scope.shouldDateBeDisabled = function(date, mode) {
  // your own logic to determine if a date should be disabled
  if (datesAreEqual(date,someSingleDateToDisable) {
    return true;
  }

  if (dateIsInArray(date,arrayOfDatesToDisable) {
    return true;
  }

  return false;
};

Answer 2

我在我的项目中有一个类似的要求，即通过提供一系列日期对象来启用日期，我已经覆盖了我项目中的默认控制器。

这就是我所做的

在“控制器（‘DatepickerController’）”下模块（“ui.bootstrap.datepicker”）我已经加入的配置和方法

this.enabledDays = getValue($attrs.enabledDays, dtConfig.enabledDays);

this.toBeDisabled = function (date, mode) {
            var currentMode = this.modes[mode || 0];
            var flag = false;
            for (var i = 0; i < this.enabledDays.length; i++) {
                if (!currentMode.compare(date, this.enabledDays[i])) {
                    flag = true;
                    break;
                }
            }

            return flag;
        }

然后我更改了以下预定义方法

this.isDisabled = function (date, mode) {

        var currentMode = this.modes[mode || 0];

        return ((this.enabledDays && !this.toBeDisabled(date, mode)) ||
            (this.minDate && currentMode.compare(date, this.minDate) < 0) ||
            (this.maxDate && currentMode.compare(date, this.maxDate) > 0) ||
            ($scope.dateDisabled && $scope.dateDisabled({date: date, mode: currentMode.name})));
    };

并在此指令directive('datepicker', ...下的链接功能中directive('datepicker', ...

我加了

var enabledDays = datepickerConfig.enabledDays;
    if (attrs.enabledDays) {
                        scope.$parent.$watch($parse(attrs.enabledDays), function (value) {
                            enabledDays = value ? value : null;
                            datepickerCtrl.enabledDays = enabledDays;
                            refill();
                        });
                    }

在链接函数中的“ scope.move”函数中，我添加了

  if (typeof datepickerCtrl.onChange != "undefined") {
        datepickerCtrl.onChange(selected);
  }

如下所示

scope.move = function (direction) {
                    var step = datepickerCtrl.modes[mode].step;
                    selected.setMonth(selected.getMonth() + direction * (step.months || 0));
                    selected.setFullYear(selected.getFullYear() + direction * (step.years || 0));
                    if (typeof datepickerCtrl.onChange != "undefined") {
                        datepickerCtrl.onChange(selected);
                    }
                    refill();
                };

现在，日期选择器已修改

在HTML标记中

<datepicker enabled-days="enabledDays" datepickerConfig="datepickerOptions"></datepicker>

其中“ enabledDays”是您可以在范围内定义的数组

对我来说很好，没有任何问题

希望这对您有所帮助:)