Allow multiple DateFormats in datepicker

Bug, feature request, or proposal:

feature

What is the expected behavior?

I want to use 2 different Date Formats in one Component.

idea

{
  provide: MAT_DATE_FORMATS, useValue: {
    "date": DATE_FORMATS,
    "other": OTHER_DATE_FORMATS,
    ...
  }
}

...
<mat-datepicker dateFormat="date"></mat-datepicker>
...
<mat-datepicker dateFormat="other"></mat-datepicker>
...

What is the current behavior?

I can replace Date Formats for component.

What are the steps to reproduce?

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

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[mmalerba]

If you’re looking for a way to have a couple static formats, it is possible: https://stackblitz.com/edit/angular-azrzg5?file=app/datepicker-moment-example.ts

Unfortunately, if you want to have it be dynamic based on a directive input (e.g. <mat-form-field dateFormat="LL">) This won’t work because there isn’t currently a mechanism to tell the datepicker that the format has updated.

It would be nice to make the more dynamic version work as well, but its not super high on our priority list

[mmalerba]

What was the error you were seeing? I don’t think it should be necessary to import @angular/compiler. I updated my stackblitz to the latest version of Angular and it still seems to be working without that import: https://stackblitz.com/edit/angular-azrzg5-pky8e5?file=main.ts