Highlight a particular week of a particular month in angular material DatePicker

Question

I saw this example in the official website of angular material

https://stackblitz.com/angular/xxjleavorkm?file=src%2Fapp%2Fdatepicker-date-class-example.ts

How to select the dates dynamically like If I have scheduled a meeting of say October from date 7 to 14 how to highlight the days for it.

There is a class called DateRange in the api but how to use it where to bind it?

There are examples only showing the angular materials Date Range picker integration with the input fields with form controls labelled as 'start' and 'end' that are probably taking the inputs of the date range but in my case I want to provide the predefined input from the backend like I would be having a start date and end date which i need to set directly in the date range picker.

P.S Also tried with saturn date Range picker but its confusing having lot more modules and dependencies to be added.

A stackblitz example would be appreciated..!!

Answer 1

In Stackblitz, change here like this.

      return (date > 1 && date < 20) ? 'example-custom-date-class' : '';

Edit:

So, you are looking for a date range selector.

https://stackblitz.com/angular/ovmarbmryxd?file=src%2Fapp%2Fdate-range-picker-overview-example.ts

EDIT 2:

You can use formControlName to get the value of selected dates.

There is another working example.

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

<p>Selected range: {{range.value | json}}</p>