我正在尝试使用ngx-bootstrap库创建一个完整的日期时间范围选择器,使用内联日期选择器和时间选择器。目标是实现类似于这个的东西:
为了使该组件工作,我将使用两个内联日期选择器实例,一个用于下限日期,另一个用于上限日期。每当在下限日期选择器中选择日期时,该日期必须设置为上限日期选择器的minDate,反之亦然。
问题是,每当minDate属性更改时,上级选择器中新的启用/禁用日期不会被刷新直到鼠标悬停在任何以前启用的日期上。
这段代码的复现非常简单,你可以在this StackBlitz找到它。我们有一个日期选择器和一些按钮,用于增加或减少日期选择器使用的minDate或maxDate属性:
HTML:
有没有办法通过编程方式触发此视图更新? StackBlitz链接: https://stackblitz.com/edit/angular-fk9pfe
![Full datetime range picker](https://istack.dev59.com/7jUbB.webp)
问题是,每当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