Встроенный указатель даты ngx-bootstrap не обновляет minDate / maxDate при изменении - PullRequest
Новая
       25

Встроенный указатель даты ngx-bootstrap не обновляет minDate / maxDate при изменении

0 голосов
/ 19 июня 2019

Я пытаюсь использовать библиотеку ngx-bootstrap для создания полного выбора диапазона даты и времени, используя Inline Datepicker и Timepicker .Цель состоит в том, чтобы добиться чего-то похожего на это: Full datetime range picker

Чтобы заставить этот компонент работать, я буду использовать два экземпляра Inline Datepicker , один длямладшая дата и другие для старшей даты.Всякий раз, когда в нижнем средстве выбора даты выбирается дата, эта дата должна быть установлена ​​как minDate старшего средства выбора даты, и наоборот.

Проблема заключается в том, что всякий раз, когда свойство minDate изменяется, новое включается / отключаетсядаты в улучшенном средстве выбора не обновляются до тех пор, пока мышь не наведет курсор на какую-либо ранее активированную дату .

Код для воспроизведения этого действительно прост, его можно найти в this StackBlitz .У нас есть средство выбора даты и несколько кнопок, которые увеличивают или уменьшают свойства minDate или maxDate, используемые средством выбора даты:

HTML: 

<bs-datepicker-inline
    [bsValue]="today"
    [minDate]="minDate"
    [maxDate]="maxDate"
    (bsValueChange)="onDateChange($event)">
</bs-datepicker-inline>

<button (click)="onClick('min+')">minDate +</button>
<button (click)="onClick('min-')">minDate -</button>
<button (click)="onClick('max+')">maxDate +</button>
<button (click)="onClick('max-')">maxDate -</button>

Компонент: 

today: Date;
minDate: Date;
maxDate: Date;

constructor() {
    this.today = new Date();
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setDate(this.minDate.getDate() - 1);
    this.maxDate.setDate(this.maxDate.getDate() + 1);
}

onClick(command: string) {
  switch (command) {
    case 'min+':
      this.minDate.setDate(this.minDate.getDate() + 1);
      break;
    case 'min-':
      this.minDate.setDate(this.minDate.getDate() - 1);
      break;
    case 'max+':
      this.maxDate.setDate(this.maxDate.getDate() + 1);
      break;
    case 'max-':
      this.maxDate.setDate(this.maxDate.getDate() - 1);
      break;
  }
}

Есть ли возможность запустить это представление программно?

Ссылка StackBlitz: https://stackblitz.com/edit/angular-fk9pfe

1 Ответ

1 голос
/ 19 июня 2019

Попробуйте следующее грязное исправление: 

onClick(command: string) {
  switch (command) {
    case 'min+':
      this.minDate.setDate(this.minDate.getDate() + 1);
      break;
    case 'min-':
      this.minDate.setDate(this.minDate.getDate() - 1);
      break;
    case 'max+':
      this.maxDate.setDate(this.maxDate.getDate() + 1);
      this.rerender = true;
      break;
    case 'max-':
      this.maxDate.setDate(this.maxDate.getDate() - 1);
      break;
  }
  this.today = new Date();
}

Компонент выбора даты не обнаруживает изменений при изменении значения min или max и даже не обновляется с помощью ChangeDetectorRef, но обнаруживает изменения, если вы сбрасываете значение [bsValue]. Похоже, что это ошибка, поскольку входы [bsValue], [minDate] и [maxDate] являются связанными, но не обнаруживают изменения за последние два.

Edit:

Похоже, что это ошибка, была открыта проблема, чтобы решить эту проблему: https://github.com/valor-software/ngx-bootstrap/issues/5286

...