в angular-ui-bootstrap (v.0.10.0) Datepicker - как отключить отдельные дни по дате (или массиву дат)?

Я искал повсюду дольше, чем хотелось бы признать, и не могу найти ответа на этот вопрос. документация здесь - http://angular-ui.github.io/bootstrap/#/datepicker - говорит ...

date-disabled (date, mode)

(По умолчанию: null): необязательное выражение для отключения видимых параметров в зависимости от даты передачи и текущего режима (день | месяц | год).


а в разметке HTML все примеры показывают это в коде как атрибут на входе ...

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

мне нужно знать, что делать в моем JavaScript, чтобы он действительно работал. были бы очень признательны за пример для одного дня и пример для передачи массива дат.

заранее спасибо...


person dustincaruso    schedule 21.03.2014    source источник


Ответы (2)


Разметка

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

означает, что в вашей области действия вам потребуется функция с именем disabed, которая принимает два аргумента, date и mode, которые вы должны использовать, чтобы определить, следует ли отключить эту дату.

Вот вам более наглядный пример. Сделайте разметку

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

Затем в вашем контроллере вам нужно будет прикрепить функцию с именем 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;
};
person JoseM    schedule 21.03.2014

У меня было аналогичное требование в моем проекте, чтобы включить дни, предоставив массив объектов даты, я переопределил контроллер по умолчанию в моем проекте.

Это то, что я сделал

В «контроллере ('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', ...

я добавил

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" - это массив, который вы можете определить в области видимости.

Работал у меня пока без проблем

Надеюсь, это поможет вам :)

person Vamsi    schedule 22.03.2014