Angular 4 - material 2 - md datepicker set first day of the week

Question

How to set first day of the week using material 2?

Currently the default is sunday even if I set the locale to hu or anything else..

Could you share link to the your matherial2, please? – Sergii Jul 12 '17 at 12:53 — Sergii, Jul 12 '17 at 12:53
Using the 2.0.0-beta.7 version – Béla Olcsán Jul 12 '17 at 12:55 — Béla Olcsán, Jul 12 '17 at 12:55

score 43 · Accepted Answer · edited Dec 28 '17 at 11:34

43

Found a workaround:

Write this class

import {NativeDateAdapter} from '@angular/material';
import {Injectable} from '@angular/core';

@Injectable()
export class MyDateAdapter extends NativeDateAdapter {

  getFirstDayOfWeek(): number {
    return 1;
  }

}

Then import to the app.module like:

{provide: DateAdapter, useClass: MyDateAdapter},

edited Dec 28 '17 at 11:34

j2L4e

6,914
34
40

answered Jul 12 '17 at 13:21

Béla Olcsán

705
1
7
12

score 18 · Answer 2 · answered Jan 12 '19 at 19:24

18

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

  ngOnInit() {
    this.dateAdapter.setLocale('es');
    this.dateAdapter.getFirstDayOfWeek = () => { return 1; }
  }

answered Jan 12 '19 at 19:24

David Pestana

189
1
2

4

Code only answers are discouraged. Add some explanation of how you got there. – schu34 Jan 12 '19 at 19:48
Finally this is a workaround that worked for me (with @angular/material 10.2.5). Thanks! – praegustator Nov 24 '20 at 19:09

score 6 · Answer 3 · answered Jul 29 '18 at 07:50

Pretty much the sam answer as Béla but I had to implement the constructor to get it working.

import { NativeDateAdapter } from '@angular/material';
import { Injectable } from '@angular/core';
import { Platform } from '@angular/cdk/platform';

@Injectable()
export class SwedishDateAdapter extends NativeDateAdapter {
  constructor() {
    super('sv-SE', new Platform());
  }

  getFirstDayOfWeek(): number {
    return 1;
  }
}

score 1 · Answer 4 · answered Nov 13 '18 at 16:24

I'm currently using angular 6 with the corresponding version of the material.

The solutions above worked however since i was using the moment.js adapter the application stopped working correctly.

Using the code at https://github.com/angular/material2/blob/master/src/material-moment-adapter/adapter/moment-date-adapter.ts and injecting it into the module made the application detect the correct region and set the starting day to monday (mine was pt-pt).

The only change needed was to set the correct moment import.

score 1 · Answer 5 · answered May 15 '19 at 12:32

1

Simply add the following to you app.module.ts:

  providers: [
    { provide: LOCALE_ID, useValue: 'en-GB' }
  ],

answered May 15 '19 at 12:32

user7518s

452
1
7
16

Angular 4 - material 2 - md datepicker set first day of the week

5 Answers5

Linked