How to implement a Date Range Picker using mat-calendar in Angular

Question

I would like to implement a Daterange picker using mat-calendar in Angular. I am not able to get implement it in a correct way. Can anyone help me in this.

My html code:

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

My Ts Code:

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

Answer 1

You have to provide a range selection strategy to get the preview working.

  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>