MatDatePicker start week on monday

Question

There is any way to configure the md-datepicker to start week on monday? By default it start on Sunday and there isn't any specification who to change this.

Solution 1

You have to build a custom DateAdapter. A custom DateAdapter is a class which implements the DateAdapter interface. It must have a bunch of predefined function implementations and have to be registered as a useClass for the DateAdapter provider.

providers: [{provide: DateAdapter, useClass: CustomDateAdapter }]

The date adapter tells the datepicker things like how to store dates/times internally, how to present them in the input and other things.

Material provided two classes which implement the DateAdapter interface: NativeDateAdapter and MomentDateAdapter. They tell MatDatepicker how to work with the javascript native Date object and moment object, respectively. I'll talk about the javascript native Date object, but the same principles apply to any date representation. The javascript Date object has some limitations (for example, it's not possible to tell it how do you want to present dates). The long story short: just extends the Material provided NativeDateAdapter and override the functions you need. What you want to do is shown in this stackblitz demo (basically you want to override a function of the NativeDateAdapter: getFirstDayOfWeek : () => number) and I'll give a little overview afterwards.

getFirstDayOfWeek(): number {
  return 1;
}

In the demo, you will see a custom-date-adapter.ts. This is where you should extended the NativeDateAdapter, overriding two functions:

1) parse: (value: any) => Date | null
2) getFirstDayOfWeek: ()=> number

The first function meant to a) among other things, create a Date object from what the user chose in the calendar, and b) parse what is typed in the input to a Date object.

The second function (getFirstDayOfWeek) tells the calendar to start in a specifc week day (0 - Sunday, 1 - Monday, 2 - Tuesday ...).

Also there's an interesting format: (date: Date, displayFormat: Object) => string function available to be implemented/overriden that allows you to define the format the date string must be shown in the input after being selected from the calendar popup.

In the demo, in the main.ts you must tell Angular that there is a custom date adapter to use (look at the providers array). In this case, I built this demo to work with Brazilian Portuguese (look at the main.ts constructor, for the date.setLocale('pt-BR')). Over here, we present dates as dd/MM/yyy, knowing Monday == "Segunda-Feira" in portuguese. :D

The other pre-built adapter (MomentDateAdapter, based on Moment.js instead of just the native Date object) that, in some cases, saves you from building a custom date adapter, as Moment.js already deals with locales in a more efficient way).

Hope it helps.

Solution 2

In case if anyone using <ngx-mat-datetime-picker> and wanted to achieve start a week from Monday instead of Sunday.

app.module.ts

providers:[{ provide: NgxMatDateAdapter, useClass: CustomDateAdapter}]

custom.date.adapter.ts

import { NgxMatNativeDateAdapter } from '@angular-material-components/datetime-picker';
import { Injectable } from "@angular/core";


@Injectable()
export class CustomDateAdapter extends NgxMatNativeDateAdapter {
  getFirstDayOfWeek(): number {
     return 1;
   }
}

Solution 3

If the solution from @julianobrasil doesn't work for someone, you can try this:

If you have multiple sub modules in your project, where one of them uses the Material DatePicker, then make sure that none of the SubModules imports the MatNativeDateModule. This module provides its own DateAdapter, which may overwrite your own DateAdapter from app.module.ts.

Comments

[Alex]

I found out what can be done, but don't understand why. as I said, I added the provider to Core Module, which is imported by App Module. I suppose it will, like services, be provided to the whole applications. Suspicious that it might not be the case, I added the provide object to my lazy loaded feature module also, and then the custom adaptor is invoked. but why? shouldn't it be sufficient to add it to Core Module?

[julianobrasil]

Sorry about that. I've fixed the plunk.

[dermoritz]

this is not working for me. My datepicker is injectable but is never instantiated: stackoverflow.com/questions/65104948/…

[Andrew]

Don't forget to add the @Injectable() annotation to avoid the future warning.