在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”是您可以在范圍內定義的數組

對我來說很好，沒有任何問題

希望這對您有所幫助:)