Breaking News: Grepper is joining You.com. Read the official announcement!

show date range on mat-calendar

Careful Cowfish answered on January 18, 2022 Popularity 9/10 Helpfulness 2/10

answer show date range on mat-calendar

show date range on mat-calendar

Comment

  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>

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: date-range show whatever

Link to this answer
Share Copy Link