Angular 中过滤数据的日历

Question

我想要一个可以过滤日期的日历，以便用户只能 select 这些日期的数据。过滤日期是使用angular material datepicker实现的，但问题是不能一直打开。这意味着，如果我在日期选择器外部单击，它就会关闭。我不想要这个。我想一直打开它所以我需要日历

所以我想要一个始终显示日期并用日期过滤的日历。如果可能的话，我想要的正是下面显示的图像。任何帮助将不胜感激。提前致谢。

Answer 1

您可以将 mat-calendar 与 dateFilter 指令一起使用。 https://github.com/angular/components/blob/master/src/material/datepicker/calendar.ts#L233

<mat-calendar [dateFilter]="myFilter"></mat-calendar>

其中 myFilter:

myFilter = (d: Date): boolean => {
  const day = d.getDay();
  // Prevent Saturday and Sunday from being selected.
  return day !== 0 && day !== 6;
}

Stackblitz 示例：https://stackblitz.com/edit/angular-xvvc8y?file=app/datepicker-overview-example.html