Angular MAT_DATE_FORMATS change values at runtime

Question

So in my Module when I do the import of the Material date picker, i provide MAT_DATE_FORMATS

{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }

But the value to be provided is dependant on the user since the date format is a user setting. This implies that I need to be able to change the value of MAT_DATE_FORMATS at runtime. I already tried this answer. In which in my user service listen to events

Class SomeUserService {
  constructor(@Inject(MAT_DATE_FORMATS) formats: MatDateFormats) {
      this.userSessionSubject.subscribe((s) => {
          formats.parse.dateInput = session.dateFormat;
          formats.display.dateInput = session.dateFormat;
     });
  }
}

So I thought that this would simply update the formats globally throught the app wherever I use a <mat-datepicker>. But this does not work. In my test case, the setted dateInput would be the string 'dd/MM/YYYY' or 'DD/MM/YYYY'; Yet a datepicker will still display the US notation in the input field.

This is how the DatePicker with input field is displayed

<mat-form-field class="w-100 no-border-mat-input">
  <input matInput [matDatepicker]="datePicker" placeholder="placeholder" formControlName="date" required="getRequired('date')" name="date">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

EDIT I also tried this answer as suggested in the comments and although my formatting is called, it is not applied in the datepicker nor the input field.

And in the screenshot below I list my providers (only one present which is to call the formatting)

So the idea there is to replace the provisioning of formats to do the formatting logic ourselves. We indeed had both but I sought to simplify it by globally setting it in a central place and have it available by default everywhere. — Wouter Vandenputte
– Wouter Vandenputte, Commented Jun 14, 2022 at 13:06
And the reason for it was simply this: suppose I enter the date March 2, 2022, then it will be formatted to 02/03/2022 (DD/MM/YYYY). But if change the year to 2021 then the date given to my service is Feburary 3 2021, so somewhere in the Angular/Material framework is was of that impression. — Wouter Vandenputte
– Wouter Vandenputte, Commented Jun 14, 2022 at 13:16
@Eliseo that answer is exactly what I need but for God knows what reason it won't work :( — Wouter Vandenputte
– Wouter Vandenputte, Commented Jun 15, 2022 at 9:29

vvvvv · Accepted Answer · 2024-05-25 11:14:36Z

0

I needed to import the MatMomentDateModule and it made everything work.

_{This answer was posted as an edit to the question Angular MAT_DATE_FORMATS change values at runtime (FIXED) by the OP Wouter Vandenputte under CC BY-SA 4.0.}

answered May 25, 2024 at 11:14

vvvvv

32.9k19 gold badges70 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular MAT_DATE_FORMATS change values at runtime

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related