Change the First Day of the Week in a DatePicker

Environment

Description

How to change the first day of the week in a DatePicker?

Solution

By default, the starting day of the week is determined by the used locale (typically Monday or Sunday). But there are cases when the starting day should not correspond to the locale. To accomplish such customization:

1. Create a service which inherits the built-in CldrIntlService. Define a firstDay method to overwrite the default day set by the service and return the desired day from which the week will start:

   Copy Code@Injectable()
   export class FirstDayIntlService extends CldrIntlService {
       public firstDay(): number {
           return 3;
       }
   }

2. In the @NgModule add the created service to the providers section:

   Copy Code@NgModule({
       ...
       providers: [
           {
               provide: IntlService,
               useClass: FirstDayIntlService,
           },
       ],
   })

The following example demonstrates how to implement the described approach.