How Do I use Angular Date Pipe in material date picker?

Question

I am new to Angular, and I want to format my input value for my date picker, but I cannot figure out how. I want to do something like this:

    <mat-date-range-input [rangePicker]="picker">
    <input
      class="hide"
      matStartDate
      [value]="startDate | date: 'shortDate': '' "
      #dateRangeStart
      placeholder="Start date"
    />
    <input
      class="hide"
      matEndDate
      [value]="endDate | date: 'shortDate': '' "
      placeholder="End date"
      [max]="today"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)"
    />
    />

Answer 1

Import DatePipe in .ts:

import {DatePipe} from '@angular/common';

constructor(private datePipe: DatePipe) {}

In app.module.ts, import DatePipe and add it in providers:

providers: [DatePipe]

Add the following in your dateChange function:

dateRangeChange (dateRangeStart, dateRangeEnd) {
    startDate = this.datePipe.transform(dateRangeStart, 'yyyy-MM-dd');
    endDate = this.datePipe.transform(dateRangeEnd, 'yyyy-MM-dd');
}