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

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[gaewynn]

I had the same needs for a project: use custom date formats and apply them instantly when the user switches the language within the application, and using different formats for different datepickers.

So waiting this feature to be available, I did a wrapper (really not perfect) around the Material DatePicker that seems to do the job for me for now. It's available here if it can help

[pookdeveloper]

+1 i need multiple variants of date formats

[Totati]

It is possible for all the date adapters but the native. Use one of those and set the dateInput of the parse property to a string array. https://material.angular.io/components/datepicker/overview#momentjs-formats

@andrewseguin