How to change mat date picker date format in Angular?

Question

I am using Angular mat date picker, its working good but the format of the date is not like what i want.

 <mat-form-field class="inputFieldForNewPolicy">
      <mat-label>Change details</mat-label>
      <input matInput name="selectedDate" [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="selectedDate">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

in ts file if i say:

sendButtonClicked() {
    console.log(this.selectedDate);
  }

the result comes as like:

Sat Aug 17 2019 00:00:00 GMT+0300 (Eastern European Summer Time)

I just want something like

17/08/2019

How can i change the format? In html or in ts?

Possible duplicate of [angular material 2, change datepicker Date Format "MM/DD/YYYY" to "DD/MM/YYYY" strange behavior](https://stackoverflow.com/questions/46392275/angular-material-2-change-datepicker-date-format-mm-dd-yyyy-to-dd-mm-yyyy-s) — Amira Bedhiafi, Aug 05 '19 at 11:31

Bharat Chauhan · Accepted Answer · 2019-08-05T11:40:43.420

Three Four different type of setting. I have suggest app level (Indian / Britain) locale settings.

........
import { NgModule, LOCALE_ID } from '@angular/core';
.......

@NgModule({
  declarations: [
    .....
  ],
  imports: [
    ....
  ],
  providers: [
    ...
    { provide: LOCALE_ID, useValue: 'en-IN' } // en-GB
  ],
  exports: [...],
  bootstrap: [...]
})
export class AppModule {
}




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

constructor(
        private datePipe: DatePipe
    ) {}

sendButtonClicked() {
    console.log(this.selectedDate);
    this.selectedDate = this.datePipe.transform(this.selectedDate, 'dd-MM-yyyy');
}

How to change mat date picker date format in Angular?

1 Answers1