angular material 2, change datepicker Date Format "MM/DD/YYYY" to "DD/MM/YYYY" strange behavior

Question

I just tried to change the angular material 2 date-picker default Date Format MM/DD/YYYY to DD/MM/YYYY or DD.MM.YYYY or at least DD-MM-YYYY

According to this question and as mentioned in the documentation

providers: [{provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}]

So tried following approaches

Approach 1 plunkr : to get in DD-MM-YYYY format

Approach 2 plunkr : to get in DD.MM.YYYY format

Approach 3 plunkr : to get in DD/MM/YYYY format

but each of above approach working ordinary until I select a Date 1 to 12,

for ex: Today date is 25th September 2017, if I select 12th September 2017 as date, then once click datepicker button again I can see calender date, taken as 09th of November 2017(09/11/2017) not as (11/09/2017) , which is seems default date format not override correctly

Answer 1

Use this in your app.module.ts under the providers: array.

{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}