Проблема углового пользовательского интерфейса Datepicker: при обновлении в реальном времени maxDate (опция datepicker) очищает активную дату - PullRequest
Новая
       29

Проблема углового пользовательского интерфейса Datepicker: при обновлении в реальном времени maxDate (опция datepicker) очищает активную дату

0 голосов
/ 28 августа 2018

Здесь у нас есть два компонента DatePicker: дата начала события и дата окончания. Цель состоит в том, чтобы минимальная дата для средства выбора даты «Дата окончания» всегда обновлялась изменением «Дата начала» (чтобы вы не могли выбрать дату окончания события, предшествующую дате начала); и средство выбора даты «Дата начала» всегда обновляется с изменением «Дата окончания» (поэтому вы не можете начать событие после даты окончания).

В следующем коде все отлично инициализируется (где scope.datePickerEnd и scope.datePickerStart являются объектами js Date) 

     scope.datePickerOptionsStart = {
        showWeeks: false,
        formatDay: 'd',
        minDate: moment().startOf('day'),
        maxDate: scope.datePickerEnd
      };


      scope.datePickerOptionsEnd = {
        showWeeks: false,
        formatDay: 'd',
        minDate: scope.datePickerStart
      };

<div
    uib-datepicker="dd MMMM, yyyy"
    datepicker-options="datePickerOptionsStart"
    maxDate="datePickerEnd"
    ng-if="datePickerStart"
    ng-model="datePickerStart"
    class="date-picker-start"
    ng-change="dateChanged('start')">
</div>
<div
    uib-datepicker="dd MMMM, yyyy"
    datepicker-options="datePickerOptionsEnd"
    ng-model="datePickerEnd"
    ng-if="datePickerEnd"
    class="date-picker-end"
    ng-change="dateChanged('end')">
</div>

Вот код, который запускается при изменении даты: 

scope.dateChanged = (type) => {
if(!scope.item || !!scope.updating) { return; }
scope.updating = true;
switch(type) {
  case 'start':
    scope.datePickerStart = new Date(scope.item.start_at);
    scope.datePickerOptionsEnd.minDate = scope.datePickerStart;
    scope.updating = false;
    break;
  case 'end':
    scope.datePickerEnd = new Date(scope.item.start_at);
    scope.datePickerOptionsStart.maxDate = scope.item.end_at = scope.datePickerEnd;
    scope.updating = false;
    break;
  default:
  scope.updating = false;
    break;
}
};

Если вы выберете новую «Начальную дату», minDate «Дата окончания» будет обновляться нормально. Однако, если вы выберете новую «дату окончания» и обновите параметр dateDicker MaxDate для «даты начала» с помощью scope.datePickerOptionsStart (выше), он будет работать, как и предполагалось, при отключении правильных дат, но при этом будет удален активный класс с текущей даты. У кого-нибудь есть какие-нибудь решения / идеи здесь?

...