Отключить средство выбора даты начальной загрузки пользовательского интерфейса, если дата меньше текущей даты – Angularjs ngRepeat

Как я могу отключить каждое отдельное средство выбора даты, если модель даты меньше текущей даты или если дата «истекла».

Я разрабатываю пользовательский интерфейс с датпикерами для дат начала и окончания. Первоначально пользовательский интерфейс может иметь столько средств выбора даты, сколько необходимо, в зависимости от данных, возвращаемых из серверной части. Пользователи также могут добавить дополнительные средства выбора даты.

Вот пример данных, которые я использую для создания средств выбора даты с помощью ngRepeat.

        {
            "id": 1234,
            "seasons": [{
                "endDate": "2016-01-03",
                "startDate": "2015-09-10",
                "description": "2015"
            }, {
                "endDate": "2017-01-03",
                "startDate": "2016-09-10",
                "description": "2016"
            }]
        }

Я создаю пользовательский интерфейс, в котором пользователи могут изменять даты с помощью средств выбора даты, только если дата начала и окончания не истекла. В случаях, когда дата истекла, средство выбора даты необходимо отключить.

Вот мой пользовательский интерфейс для справки. введите здесь описание изображения

Мой текущий подход состоит в том, чтобы перебирать массив сезонов и проверять, меньше ли startDate, чем сегодня.

        ss.datePickerStartDateEnabled = false;

        angular.forEach(ss.seasonSet.seasons, function(season, key) {
            if (season.startDate < today) {
                console.log('Less than today');
                ss.datePickerStartDateEnabled = true;
            }
        });

Пока работает, но отключает startDate не меньше сегодняшнего.

Вот мой html

<div class="row" ng-repeat="s in ss.seasonSet.seasons track by $index">
   <div ng-controller="DatePickerCtrl as datePicker">
      <div class="col-md-3">                      <!-- StartDate datepicker-->
         <div class="form-group has-feedback">
            <label for="username">Start Date</label>
            <input 
               type="text" 
               class="form-control" 
               id="startDate{{$index}}" <!-- id=startDate1 -->
               uib-datepicker-popup="{{}}" 
               ng-model="s.startDate" 
               is-open="datePicker.isOpen.startDate" 
               datepicker-options="datePicker.dateOptions" 
               ng-required="true"
               ng-disabled="ss.datePickerStartDateEnabled" 
               close-text="Close"
               ng-click="datePicker.open($event, 'startDate')"/>
            <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
         </div>
         <div class="form-group has-feedback">
            <label for="username">End Date</label>
            <input 
               type="text" 
               class="form-control"
               id="endDate+{{$index}}" 
               uib-datepicker-popup="{{}}" 
               ng-model="s.endDate" 
               is-open="datePicker.isOpen.endDate" 
               datepicker-options="datePicker.dateOptions" 
               ng-required="true"
               close-text="Close"
               ng-click="datePicker.open($event, 'endDate')"/>
            <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
         </div>
      </div>
   </div>
</div>

Как я могу использовать id="endDate+{{$index}}" во входных данных средства выбора даты вместе с ng-disabled="ss.datePickerStartDateEnabled" и ss.datePickerEndtDateEnabled в моем контроллере, чтобы отключить одно средство выбора даты на основе условия, указанного выше.

Есть и другие проверки, которые мне нужно сделать, например. никакие перекрывающиеся даты и дата начала не должны быть позже предыдущей даты окончания. Сначала я пытаюсь решить простой случай.

Заранее спасибо. Вот код плункера, а вот UI, хотя средство выбора даты и времени не работает. Смотрите его в полноэкранном режиме для лучшего пользовательского интерфейса.


javascript datepicker angularjs angularjs-ng-repeat angularjs-forms
person Elvyn Mejia    schedule 04.04.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Использование ng-disabled на input — правильный подход.

Ваш комментарий,

Пока работает, но отключает startDate не меньше сегодняшнего.

Заставляет меня думать, что ваше сравнение дат может быть ошибочным, например, если они сравнивают разные форматы дат. После сравнения дат отключение input с помощью ng-disabled должно быть всем, что нужно для этого.

У вас также есть некоторая семантическая путаница в ng-disabled="ss.datePickerStartDateEnabled", где по сути говорится «отключить, если включено».

person C.C.    schedule 05.04.2016
comment
Спасибо за ваш отзыв. Судиться с ng-disable было правильным подходом. Скоро выложу свое решение. - person Elvyn Mejia; 05.04.2016

arrow_upward
0
arrow_downward

Я смог решить эту проблему, используя следующий шаблон.

Я делегировал логику пользовательского интерфейса для отключения средств выбора даты, если срок действия истек, на мой DatePickerCtrl.

angular.module('someApp')
.controller('DatePickerCtrl', ['$filter', function($filter) {

    var datePicker = this;

    datePicker.dateOptions = {
        formatYear: 'yy',
        startingDay: 1,
    };

    var today = $filter('date')(new Date(), "yyyy-MM-dd");

    datePicker.startDateDisable = startDateDisable;
    datePicker.endDateDisable = endDateDisable;
    datePicker.open = open;

    //Useful to manage more than one datepicker in the same view
    //E.g. datepickers created in a ngRepeat
    datePicker.isOpen = {};

    function open($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        datePicker.isOpen[which] = true;
    }

    function startDateDisable(startDate) {
        return startDate <= today ? true : false;
    }

    function endDateDisable(endDate) {
        return endDate <= today ? true : false;
    }

    //Date format could come from user's profile preferences
    datePicker.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    datePicker.format = datePicker.formats[2];
}])

Единственные релевантные функции startDateDisable(startDate) и endDateDisable(endDate).

Затем я использовал директиву ng-disabled для ввода даты как таковую:

<div class="form-group has-feedback">
   <label for="username">Start Date</label>
   <input 
      type="text" 
      class="form-control" 
      id="startDate{{$index}}"
      uib-datepicker-popup="{{format}}" 
      ng-model="s.startDate" 
      is-open="datePicker.isOpen.startDate" 
      datepicker-options="datePicker.dateOptions" 
      ng-required="true"
      ng-disabled="datePicker.startDateDisable(s.startDate)"
      close-text="Close"
      ng-click="datePicker.open($event, 'startDate')"
      date-validation/>
   <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>

Соответствующий код — ng-disabled="datePicker.startDateDisable(s.startDate)", где s.startDate в моей модели ввода. DatePickerCtrl отвечает за управление состоянием пользовательского интерфейса. Данные приходят от другого контроллера.

Та же логика применима и к endDate.

person Elvyn Mejia    schedule 05.04.2016