我正在尝试制作一个可以选择多个日期的日历。我在StackBlitz上找到了这个源代码
我的AppComponent代码如下所示:
isSelected = (event: any) => {
const date = event as moment.Moment
return (this.dates.find(x => x.isSame(date))) ? "selected": null;
};
select(event: any, calendar: any) {
const date: moment.Moment = event
const index = this.dates.findIndex(x => x.isSame(date));
if (index < 0) this.dates.push(date);
else this.dates.splice(index, 1);
calendar.updateTodaysDate();
}
对于我的html:
<div class="col mx-3">
<mat-card class="demo-inline-calendar-card">
<h2 class="text-center">Reserveerbare datums</h2>
<mat-calendar #calendar (selectedChange)="select($event,calendar)" [dateClass]="isSelected"></mat-calendar>
</mat-card>
</div>
1.我在[dateClass]中遇到以下错误:
"Type '(event: any) => "selected" | null' is not assignable to type 'MatCalendarCellClassFunction<any>'"
1.当我单击日历上的某个日期时,弹出另一个错误:
"x.isSame is not a function"
任何帮助都是感激的。或者如果有人有其他的方法来做这个!
先谢了!
1条答案
按热度按时间rdlzhqv91#
像这样使用它:
https://stackblitz.com/edit/angular-multi-date-picker-c6kwgo?file=src/app/app.component.ts