0

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.

enter image description here

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 1

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.

enter image description here enter image description here

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

EDIT 2

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

Wouter Vandenputte
  • 406
  • 4
  • 12
  • Can you try https://stackoverflow.com/questions/51634726/how-to-change-angular-material-datepicker-format-in-run-time/51696436#51696436 – Alexander Jun 14 '22 at 13:00
  • 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 Jun 14 '22 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 Jun 14 '22 at 13:16
  • https://stackoverflow.com/questions/65780489/change-date-format-in-mat-datepicker-dynamically/65783137#65783137 ? – Eliseo Jun 14 '22 at 13:19
  • @Eliseo that answer is exactly what I need but for God knows what reason it won't work :( – Wouter Vandenputte Jun 15 '22 at 09:29
  • See that the "key" is indicate the providers (you can give it in the module or in the component: `providers: [{provide: DateAdapter,useClass: CustomDateAdapter,deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},{ provide: MAT_DATE_FORMATS, useClass: MyFormat }]` – Eliseo Jun 15 '22 at 09:46

0 Answers0