h2qutc / angular-material-components

Angular Material Library provide extra components for every project
https://h2qutc.github.io/angular-material-components/
MIT License
331 stars 161 forks source link

Use locale - Monday as start day #106

Open sk0gen opened 4 years ago

sk0gen commented 4 years ago

How can I change behaviour of this component and start week from Monday instead of Sunday? Thanks

Update: image Added something like this, and vs code doesn't see NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]. Without it console shows image

klimtron commented 3 years ago

Yeah, it would be nice to change the first day of the week for monday instead of sunday, has anyone else tried?

erichstark commented 3 years ago

Update providers inside your module: providers:[{ provide: NgxMatDateAdapter, useClass: MyDateAdapter}]

then create new adapter in the same location of the component/page for example

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

@Injectable()
export class MyDateAdapter extends NgxMatNativeDateAdapter {
  getFirstDayOfWeek(): number {
     return 1;
   }
}
sskorka commented 2 years ago

@erichstark This solution throws a NullInjectorError for me. For a workaround I had to keep the the previous DateAdapter provider that I used with the classic Material DateRangePicker, but now it looks pretty weird if you ask me:

providers: [
    { provide: NgxMatDateAdapter, useClass: MondayToSundayDateAdapter },
    { provide: DateAdapter, useClass: MondayToSundayDateAdapter },
  ]

And the DateAdapter class that now uses NgxMatNativeDateAdapter:

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

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

Perhaps this requires some fix or a better explanation in the readme?