I have an Angular App, where i display a lot of dates to the user.
I use Angular Material in my App and transloco for translations.
I use english and german language. The english dates are displayed exactly like i want, but for the german dates i want to change the format, because they are displayed without leading zero.
i.e. 5.4.2024 ist displayed, but i want 05.04.2024.
How can i customize the displayed date format for one of the languages (german)?
In the component html i have always something like this:
<mat-form-field class="w-full">
<mat-label>Eintrittsdatum</mat-label>
<input
[class.input-changed]="entryDateHasChanged()"
matInput
readonly
[matDatepicker]="entryDatePicker"
[(ngModel)]="entryDate"
(ngModelChange)="entryDateChange()"
name="entryDate" />
<mat-datepicker-toggle
matSuffix
(click)="clearEntryDate($event)">
<mat-icon
matDatepickerToggleIcon
svgIcon="mat_outline:clear"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker-toggle
matIconSuffix
[for]="entryDatePicker"></mat-datepicker-toggle>
<mat-datepicker #entryDatePicker></mat-datepicker>
</mat-form-field>
In my app.config.ts i have in the provider section this:
provideNativeDateAdapter(),
and in my app.component.ts i have a subscription to the language change like this:
constructor(
private translocoService: TranslocoService,
private dateAdapter: DateAdapter<Date>,
) {}
async ngOnInit() {
this.dateAdapter.setLocale(this.translocoService.getActiveLang());
this.translocoService.langChanges$.subscribe(lang => {
if (lang==='en') {
this.dateAdapter.setLocale('en-GB');
} else {
this.dateAdapter.setLocale('de-DE');
}
});
}
I think i have to provide a custom DateAdapter Class. But i don`t know how to do that.