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

Answer 1

One of possible solution is simply defining your own input format:

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [
        {provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format},
    ]
})
export class AppComponent implemets OnInit {
   // ... some code
}

The following code tells the injector to return a DD_MM_YYYY_Format when something asks for the MAT_DATE_FORMATS (read here for more details). Inside your custom format, property display.dateInput is set to DD/MM/YYYY.