ngx-bootstrap datepicker inline 更改时不刷新 minDate/maxDate

Posted 2023-05-07

【中文标题】ngx-bootstrap datepicker inline 更改时不刷新 minDate/maxDate

【英文标题】：ngx-bootstrap datepicker inline not refreshing minDate/maxDate when changed

【发布时间】：2019-11-02 10:15:57

【问题描述】：

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

为了使这个组件工作，我将使用两个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】：

现在尝试以下脏修复：

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] 输入都是绑定的，但没有检测到最后两个的更改。

编辑：

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

【讨论】：

非常感谢迈汗。实际上，检查 bsValue 输入的源与 minDate 和 maxDate 不同。无论何时设置，都会发出一个事件，并且同一组件正在侦听此事件，并更新底层 datepickerRef 实例值。