如何在 Angular 中使用 mat-calendar 实现日期范围选择器

Question

我想在 Angular 中使用 mat-calendar 实现日期范围选择器。我无法以正确的方式实现它。任何人都可以帮助我吗？

我的html代码：

<mat-calendar [selected]="range"
[comparisonStart]="range.start"
[comparisonStart]="range.end"
(selectedChange)="onChange($event)"></mat-calendar>

我的Ts代码：

range: DateRange<Date>;
constructor(){}
ngOnInit(){
}
 onChange(event)
 {
  console.log(event);
 }

Answer 1

您必须提供范围选择策略才能使预览正常工作。

  providers: [
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: DefaultMatCalendarRangeStrategy,
    },
  ],

然后，您必须将 转换Date为DateRange。

  selectedDateRange: DateRange<Date>;

  _onSelectedChange(date: Date): void {
    if (
      this.selectedDateRange &&
      this.selectedDateRange.start &&
      date > this.selectedDateRange.start &&
      !this.selectedDateRange.end
    ) {
      this.selectedDateRange = new DateRange(
        this.selectedDateRange.start,
        date
      );
    } else {
      this.selectedDateRange = new DateRange(date, null);
    }
  }

<mat-calendar (selectedChange)="_onSelectedChange($event)"
              [selected]="selectedDateRange">
</mat-calendar>