Change datepicker parse and display format at runtime

[visurel]

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.

[d-damien]

Or if you have a config file defining an interface with several datepicker components, each having a particular format (as they filter different kinds of data and need different precision). Currently, you need to create one component per format.

[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]

@marcgrabow, who is "this.picker"? how did you get a reference to this object?

[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

[marcgrabow]

@Gil-Epshtain sorry for the late response, didn't see your question. Probably not required anymore, but I just stored a reference to the picker just as a ViewChild, like this:

html:

<mat-datepicker #picker ></mat-datepicker>

ts:

@ViewChild('picker')
picker: any;

[Spaier]

Is it possible to make _dateFormats public in mat-datepicker-input? It should be possible to set custom datetime format for any datepicker.

[akvaliya]

Any progress with this issue?

[LoganDupont]

@mmalerba I was wondering if you have an update on this issue?

[marsc]

Changing the format at runtime is a default behaviour of a good datepicker plugin. This should be implemented soon.

[marsc]

Any news on this?

[wweitzel]

Need this feature as well

[wweitzel]

I've solve this problem by creating another input which is displaying formatted date value. Check stackoverflow answer

Interesting approach, but it loses the ability to type a date in manually.

[ccjmne]

The solution offered by @Gil-Epshtain works just fine. He posted a very detailed answer on StackOverflow and I have used something similar in my projects to great effect — although, you may want to improve his CustomDateAdapter by also overriding the parse method.

Have those asking for news on this understood his approach?

[wweitzel]

@ccjmne I think that solution would change the format for every date picker in the entire app. The ideal solution here is just exposing a public way to set the format per date picker.

[caiofcm]

This workaround of adding a custom input while disabling the original also can help: https://stackoverflow.com/a/58542346/3208614

[mohamedelshorbagy]

Addition to @marcgrabow great answer! I think it will be more meaningful instead of setTimeout to use zonejs instead in the ngOnInit of the datepicker component

 this.zone.onStable.pipe(
                take(1)
            ).subscribe(() => {
                const d = JSON.parse(JSON.stringify((this.picker._datepickerInput as any)._dateFormats));
                d.display.dateInput = datepickerOptions.format;
                d.parse.dateInput = datepickerOptions.format;
                (this.picker._datepickerInput as any)._dateFormats = d;
                 this.formControl.patchValue(datepickerOptions.defaultValue || moment());
            });

so I also added this line d.parse.dateInput = datepickerOptions.format; which will allow you to view the value inside the input with the given format.

[gspassky]

Mat-datepicker for Angular really has the most complicated realization I've ever seen. I met the same problem - I needed to place two datepickers in one view (one should show day, and the second should represent selected month). I couldn't find any normal solution. So finally I had to create a div representing second datepicker value in a way I need (Month + Year) and made it CSS position:absolute over the original value of my datepicker :) Some styling and voila ))) Looks like everything's OK. But of course it's not...

[NgocThachThai]

Same problem.

[mridderikhoff]

This is a feature my team would like to see

[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

[marcowuethrich]

I also have a client project where the user can change the date format. At the moment we do a dirty reload. Please consider this issue for future roadmap.

Update: @Gil-Epshtain CustomDateAdapter is working for me 👍

[robindijkhof]

https://stackoverflow.com/a/65783137/2564847