Change datepicker parse and display format at runtime

Bug, feature request, or proposal:

Currently the parse and display format of a datepicker can only be set before runtime by providing them with provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS. As shown in the example: https://material.angular.io/components/datepicker/examples

What is the expected behavior?

The parse and display format of the datepicker should also be able to be changed at runtime, the same way it’s possible to change the locale at runtime with .setLocale(). Maybe add .setDateFormat(MY_DATE_FORMAT_GENERATED_AT_RUNTIME), as sometimes the date format is only available after a HTTP request to the server.

What is the current behavior?

Date format is set in provider and cannot be changed at runtime.

What is the use-case or motivation for changing an existing behavior?

It should be possible to change the date format at runtime, to be able to react to date-formats, set by the backend. The user can set a preferred date format in the application and the application has to retrieve it from the server and adjust the datepicker accordingly. This is currently not possible.

[marcgrabow]

Managed to get in a dirty hack to change the display dateInput dateformat after init of the component.

setTimeout(() => {
      const d = JSON.parse(JSON.stringify(this.picker._datepickerInput._dateFormats));
      d.display.dateInput = momentFormat;
      this.picker._datepickerInput._dateFormats = d;
});

This is in no way a good way of doing it - but it might help someone until the feature gets implemented.

[Gil-Epshtain]

I’ve solve this problem by defining a CustomDateAdapter. You can find to full answer here: https://stackoverflow.com/questions/51634726/how-to-change-angular-material-datepicker-format-in-run-time/51696436#51696436