ngx-bootstrap日期选择器内联模式在最小日期/最大日期更改时没有刷新。

Question

我正在尝试使用ngx-bootstrap库创建一个完整的日期时间范围选择器，使用内联日期选择器和时间选择器。目标是实现类似于这个的东西： 为了使该组件工作，我将使用两个内联日期选择器实例，一个用于下限日期，另一个用于上限日期。每当在下限日期选择器中选择日期时，该日期必须设置为上限日期选择器的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

- Sebastiandg7

Answer 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);
      this.rerender = true;
      break;
    case 'max-':
      this.maxDate.setDate(this.maxDate.getDate() - 1);
      break;
  }
  this.today = new Date();
}

日期选择器组件在最小值或最大值更改时无法检测到更改，即使使用ChangeDetectorRef也无法刷新，但如果重置[bsValue]值，则可以检测到更改。看起来这是一个错误，因为[bsValue]、[minDate]和[maxDate]输入都是绑定的，但是对于后两个并没有检测到更改。 编辑： 实际上似乎是一个bug，已经开了一个问题来解决这个行为：https://github.com/valor-software/ngx-bootstrap/issues/5286

- Maihan Nijat

---

非常感谢你，Maihan。实际上，检查源代码后发现bsValue输入与minDate和maxDate不同。每当设置一个事件时，都会发出信号，同一组件正在监听此事件并更新底层datepickerRef实例值。 - Sebastiandg7