How to change angular material datepicker format

You need to provide an object containing the formats you wish to use. The object should look something like:

export const MY_FORMATS = {  parse: {    dateInput: 'LL',  },  display: {    dateInput: 'YYYY-MM-DD',    monthYearLabel: 'YYYY',    dateA11yLabel: 'LL',    monthYearA11yLabel: 'YYYY',  },};

You then need to add that in to your providers array, like so:

  import { MAT_DATE_FORMATS } from '@angular/material';  import { MomentDateAdapter } from '@angular/material-moment-adapter';  //...  providers: [    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},  ],

Here is a StackBlitz demo to show it working

No need to use MomentDateAdapter!

Here's my solution with the least amount of code and using the MAT_NATIVE_DATE_FORMATS.

1. Declare your own date formats

import { MatDateFormats, MAT_NATIVE_DATE_FORMATS } from '@angular/material';export const GRI_DATE_FORMATS: MatDateFormats = {  ...MAT_NATIVE_DATE_FORMATS,  display: {    ...MAT_NATIVE_DATE_FORMATS.display,    dateInput: {      year: 'numeric',      month: 'short',      day: 'numeric',    } as Intl.DateTimeFormatOptions,  }};

2. Use them

@Component({  selector: 'app-vacation-wizard',  templateUrl: './vacation-wizard.component.html',  styleUrls: ['./vacation-wizard.component.scss'],  providers: [    { provide: MAT_DATE_FORMATS, useValue: GRI_DATE_FORMATS },  ]})

Don't forget to set the appropriate language!

constructor(private readonly adapter: DateAdapter<Date>) {}this.adapter.setLocale(this.translate.currentLang);

That's all!

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter'; export const DateFormats = {            parse: {                dateInput: ['YYYY-MM-DD']            },            display: {                dateInput: 'YYYY-MM-DD',                monthYearLabel: 'MMM YYYY',                dateA11yLabel: 'LL',                monthYearA11yLabel: 'MMMM YYYY',            },        };    providers: [        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },          { provide: MAT_DATE_FORMATS, useValue: DateFormats }      ],

add above code in your app.module. it is working perfectly for me.