Components: Allow multiple DateFormats in datepicker

[Knoxvillekm]

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?

[CurtisDS]

make a component with a datepicker in it and provide the date format for the component.

[eduardoschonhofen]

It's not possible to provide differents DateAdapters to each Component. Only one Provider is being applied.
In something.module.ts

export class CustomDatePickerAdapter extends NativeDateAdapter {
  constructor(matDateLocale:string)
  {
    super(matDateLocale,new Platform());
  }

  format(date: Date, display: string | DateDisplay): string {
      return new DatePipe(this.locale).transform(date, 'MM/yyyy');
    }
  } 
...

providers:[{ provide: DateAdapter, useClass: CustomDatePickerAdapter, deps: [MAT_DATE_LOCALE] },{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}]

In app.module.ts

export class CustomDatePickerAdapter2 extends NativeDateAdapter {
  constructor(matDateLocale:string)
  {
    super(matDateLocale,new Platform());
  }
  format(date: Date, display: string | DateDisplay): string {
      return  new DatePipe(this.locale).transform(date, 'dd/MM/yyyy');
 }
}
...
{ provide: DateAdapter, useClass: CustomDatePickerAdapter2, deps: [MAT_DATE_LOCALE] },
  {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}

All DatePickers are working with CustomDatePickeerAdapter2,instead of one working with 1 and other with 2.

[SERGEES]

@mmalerba
Hello! Any plans to support this type of feature?

I also need to have option to dynamicaly change date format. Or have several datepuckers on the same page with diferent formats
e.g. i need one simple datepicker 'MM/DD/YYYY'
https://stackblitz.com/angular/ebqdrlayjmp?file=app%2Fdatepicker-custom-icon-example.ts
and one datepicker with diferent date format 'MMM YYYY'
https://stackblitz.com/edit/angular-kvsbgz?file=app/datepicker-views-selection-example.ts

Thanks

[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

[monstrege]

Thanks @mmalerba,

Your temporary solution seems to work, but I had to add a minor change to make it work.
I had to add
import '@angular/compiler'
into main.ts

Do you know how to fix it without adding angular/compiler?

[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