In Angular Material, the mat-datepicker component allows users to select dates from a calendar picker. You can customize the date format displayed in the mat-datepicker by using the MAT_DATE_FORMATS provider and defining your own date format. Here’s how you can do it:

1. Install “@angular/material-moment-adapter” the version of you angular material
   npm i @angular/material-moment-adapter@[your_angular_version]
2. Install “moment”
   npm i moment

Solution 1:

1. Import the necessary dependencies: In your component file (my-component.component.ts), import the MatDateFormats interface and the MAT_DATE_FORMATS provider from Angular Material:

import { Component } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

2. Define your custom date format: Below your component class, define a constant variable to hold your custom date format. You can use the MatDateFormats interface to determine the format options available. For example, if you want to display the date in the format “dd/MM/yyyy”, you can define the format as follows:

   const MY_DATE_FORMATS: MatDateFormats = {
     parse: {
       dateInput: 'LL',
     },
     display: {
       dateInput: 'DD/MM/yyyy',
       monthYearLabel: 'MMM yyyy',
       dateA11yLabel: 'LL',
       monthYearA11yLabel: 'MMMM yyyy',
     },
   };

3. Provide the custom date format: Inside your component class, use the providers property to provide the MAT_DATE_FORMATS token with your custom date format. This will override the default date format for all mat-datepicker components used within your component:

   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css'],
     providers: [{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
                 { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }]
   })
   export class MyComponent {
     // Component code goes here
   }

4. Use the mat-datepicker component: In your component’s template file (my-component.component.html), use the mat-datepicker component as you normally would:

   <mat-form-field>
     <input matInput [matDatepicker]="myDatepicker" placeholder="Choose a date">
     <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
     <mat-datepicker #myDatepicker></mat-datepicker>
   </mat-form-field>

The mat-datepicker component will now display the dates using your custom format.

With these steps, you can customize the date format displayed in the mat-datepicker component in Angular Material. Remember to adjust the MY_DATE_FORMATS constant according to your desired format.

Solution 2:

The easiest way is to change the locale:

Add the following to the providers section of your module or component:

 providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_LOCALE, useValue: 'ko-KR' }
]

You can any other locale as per you required date format

Solution 3

import { DateAdapter } from '@angular/material';

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('your locale'); 
}

Complete Example : Github