ngx-bootstrap 内联日期选择器在更改时不刷新 minDate/maxDate

Question

我正在尝试使用 ngx-bootstrap 库通过 Inline Datepicker and the Timepicker 创建一个完整的日期+时间范围选择器。目标是实现与此类似的目标：

为了使该组件正常工作，我将使用两个 Inline Datepicker 实例，一个用于次级日期，另一个用于高级日期。每当在下级日期选择器中选择一个日期时，该日期必须设置为上级日期选择器的 minDate，反之亦然。

问题是每当 minDate 属性发生变化时，上级选择器中的新 enabled/disabled 日期不会刷新 直到鼠标悬停在任何先前启用的日期上.

重现这个的代码非常简单，你可以在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 link: https://stackblitz.com/edit/angular-fk9pfe

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();
}

date-picker 组件不会在最小值或最大值发生变化时检测到变化，甚至不会用 ChangeDetectorRef 刷新，但如果您重置 [bsValue] 值，它会检测到变化.看起来这是一个错误，因为 [bsValue]、[minDate] 和 [maxDate] 输入都已绑定，但未检测到最后两个的更改。

编辑：

这似乎是一个错误，已打开一个问题来解决此行为：https://github.com/valor-software/ngx-bootstrap/issues/5286

ngx-bootstrap 内联日期选择器在更改时不刷新 minDate/maxDate

ngx-bootstrap datepicker inline not refreshing minDate/maxDate when changed

angular

datepicker

timepicker

bootstrap-datepicker

ngx-bootstrap