start with monday on Angular Material mat-calendar

Question

I have a Calender displayed on my Angular App to select Dates, and since i Live in a Country were its custom the Week to start with Monday, I would need to change the Calendar to start with Monday and end with Sunday.

HTMl Template:

<mat-calendar
        [selected]="form.get('businessDate')?.value"
        (selectedChange)="updateFormDate($event)"
        [minDate]="prepare?.reservationParameters?.minBusinessDate"
        [maxDate]="prepare?.reservationParameters?.maxBusinessDate"
      ></mat-calendar>

APP Module:

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
registerLocaleData(localeDe);

const DEV_PROVIDERS: Provider[] = [
  { provide: LOCALE_ID, useValue: "de" },
  authInterceptorProvider
];

providers: [environment.production ? PROD_PROVIDERS : DEV_PROVIDERS]

Im didnt find anything else on the Web regarding to this. Thank you in advance

https://stackoverflow.com/questions/45019317/matdatepicker-start-week-on-monday — robbieAreBest, Mar 09 '23 at 02:22
You're providing `LOCALE_ID`, which is used mostly by i18n features. Datepicker uses separate locale, `MAT_DATE_LOCALE`. So you need something like `{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}` and you should be good. — TotallyNewb, Mar 09 '23 at 09:51

score 0 · Answer 1 · answered Jun 01 '23 at 06:08

I had the same issue. After trying out multiple soultions, I found one that worked perfectly for me.

You need to make some changes in your .ts file.

Import the DateAdapter Class from @angular/material/core module. DateAdapter here acts as an abstract base class for datepicker components, providing methods and properties to format, pars, and manipulate dates in Angular Material's datepicker component.

import { DateAdapter } from '@angular/material/core';

Then in the constructor, add the following-

 constructor(private dateAdapter: DateAdapter<Date>){}

By including private dateAdapter: DateAdapter as a parameter in the constructor, you are instructing Angular to inject an instance of the DateAdapter class into the component or service that contains this constructor. You can then use the dateAdapter instance within the class to access the methods and properties provided by the DateAdapter class for manipulating and formatting dates.

Lastly in ngOnInit() -

ngOnInit(): void {
this.dateAdapter.setLocale('en-US');
this.dateAdapter.getFirstDayOfWeek = () => { return 1; }
}

Here's a breakdown of what each line does:

this.dateAdapter.setLocale('en-US');: This line sets the locale of the dateAdapter instance to 'en-US', which represents the English language with the United States date format. This affects how dates are formatted and displayed by the dateAdapter and related Angular Material components.

this.dateAdapter.getFirstDayOfWeek = () => { return 1; }: This line assigns a custom function to the getFirstDayOfWeek property of the dateAdapter instance. The custom function returns 1, indicating that Monday should be considered the first day of the week. By default, the dateAdapter uses the locale-specific first day of the week. In this case, you are overriding it to enforce Monday as the first day of the week.

start with monday on Angular Material mat-calendar

1 Answers1