I’m currently working Angular 15 with Angular Material’s Datepicker and have encountered a limitation that I would like to address. The default Datepicker provides basic functionality, but I want to enhance it by adding shortcuts for date ranges such as “Past Week,” “Past Month,” and “Past Year.”

Currently, my Datepicker looks like this:

// angular material datepicker
<mat-form-field>
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

I’ve searched through the documentation and various forums, but the solutions I found only discuss changing the format, headers, and styles, without addressing the addition of custom date range shortcuts.

My Question: How can I efficiently customize the Angular Material Datepicker to include these shortcut options? Any guidance or examples would be greatly appreciated!

What I’ve tried so far :

• Customizing the date format using the matDateFormats configuration.
• Modifying the header titles with mat-datepicker-header.
• Implementing a custom input field for quick selection but haven’t integrated it seamlessly with the existing Datepicker.

How I want it to look like: