![](/img/trans.png)
[英]How to disable Angular Material Datepicker dates from an array of dates?
[英]How do I exclude dates from angular material datepicker?
我正在使用 Angular Material,我有一个动态的日期数组,我希望从我的日期选择器中排除这些日期。 此外,我还试图排除星期六。 如何使用 matDatepickerFilter 返回多个日期? 请记住,我不能单独对数组的每个项目进行硬编码,因为数组是流动的,并且会在一段时间后更改其值和长度。
这是我的 HTML:
<mat-form-field style="text-align: center;"
[ngClass]="{'hideTitle': submitted && f4.houseNumber.errors?.required && f4.aptNumber.errors?.required}">
<input matInput
[matDatepicker]="picker"
placeholder="Desired Delivery Date"
[matDatepickerFilter]="myFilter"
formControlName="deliveryDate"
style="font-family: 'Open Sans Condensed', sans-serif; color:white;">
<mat-datepicker-toggle matSuffix [for]="picker"
style="color:gold;outline:none;"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
</mat-form-field>
这是我的数组:
this.allDupedDates = [
new Date('2019-04-30T00:00:00+02:00'),
new Date('2019-04-28T00:00:00+02:00'),
new Date('2019-05-21T00:00:00+02:00'),
new Date('2019-05-23T00:00:00+02:00')
]
这是代码:
myFilter = (d: Date): boolean => {
const time = d.getTime();
const day = d.getDay();
for (let i = 0; i < this.allDupedDates.length; i++) {
var date = this.allDupedDates[i].getTime();
return time !== date
}
return day !== 6;
}
您需要的过滤代码:
myFilter = (d: Date): boolean => {
const day = d.getDay();
const blockedDates = this.allDupedDates.map(d => d.valueOf());
return (!blockedDates.includes(d.valueOf())) && day !== 6;
}
- 日期对象可以使用 valueOf() 方法轻松地相互比较,该方法返回自纪元以来的毫秒数。
需要注意的重要提示:
StackBlitz 示例: https ://stackblitz.com/edit/angular-datepicker-filter-so?file=app%2Fdatepicker-filter-example.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.