如何解决角度:MatDateRangeInput过滤器
我已经实现了Angular Material Date选择器,并希望过滤可以选择的日期。 因此,我希望用户选择一个日期,然后只能在开始日期之后的21天或更短的范围内。
我本来打算有两个日期字段,但是客户希望日期范围的外观和感觉。
解决方法
因此,我得到了一个简单的解决方案,在该方法中,我仍然允许用户选择超过21天,然后在选择第二个日期后将其恢复为21天,并将选择器设置为新的结束日期。
HTML代码
<mat-date-range-input [min]="minDate" [max]="maxDate" [rangePicker]="picker" >
<input matStartDate placeholder="Start date" formControlName="checkin">
<input matEndDate placeholder="End date" formControlName="checkout" [ngModel]="calculateDays()">
</mat-date-range-input>
TS代码
calculateDays(): void{
let days = (this.searchForm.value.checkout - this.searchForm.value.checkin) / 86400000;
if(days > 21){
this.searchForm.value.checkout = new Date(this.searchForm.value.checkin);
this.searchForm.value.checkout.setDate(this.searchForm.value.checkout.getDate() + 21);
this.searchForm.controls.checkout.patchValue(this.searchForm.value.checkout);
days = 21;
}
if(days > 0){
this.days = days;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。