show date range on mat-calendar
providers: [
{
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: DefaultMatCalendarRangeStrategy,
},
],
// Then, you'd have to do some converting of Date to 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>