Angular Material 5 – How to Customise date in mat-datepicker

You have to create custom date picker format for date picker 2

I think DEMO will be helpful for you.

DEMO -----> multi-format-date-picker

HTML:

in main form :

 <app-datepicker1 (date1)="catchDate1($event)"></app-datepicker1>
<app-datepicker2 (date2)="catchDate2($event)"></app-datepicker2>

TS;

 date1 : Date ;
  date2 : Date ;

  catchDate1(event) {
    this.date1 = event;
  }

  catchDate2(event) {
    this.date2 = event;
  }

Date format 2 :

export const MY_FORMATS2 = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

You can use DatePipe to format the date as per your requirement.

Import in main.module.ts

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

and add Datapipe in Providers array.

Then in related component import the same as

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

and in constructor

constructor(private datePipe : DatePipe)
{

}

and to use date pipe just use

this.datePipe.transform(your_date, 'MM-dd-yyyy');

Have a look at StackBlitz Example where I have consoled the date value in MM-dd-yyyy format.