This library provides a custom DateAdapter for the Angular Material Datepicker component using the date-fns library.
- Includes all locales provided by date-fns.
- Supported Jalali calendar for
fa-IR
locale.
https://mohsen77sk.github.io/angular-material-date-fns-adapter/
Install ngx-material-date-fns-adapter
npm install date-fns date-fns-jalali ngx-material-date-fns-adapter
Both date-fns
and date-fns-jalali
libraries are peer dependencies, but required for the compilation.
Angular Version | date-fns Version | date-fns-jalali Version | ngx-material-date-fns-adapter Version |
---|---|---|---|
^18.0.0 | >=2.22.0 <4.0 | >=2.22.0-0 <=3.6.0-0 | latest |
^17.0.0 | >=2.22.0 <4.0 | >=2.22.0-0 <=3.6.0-0 | 17.0.3 |
^16.0.0 | >=2.22.0 <3.0 | >=2.22.0-0 <=2.30.0-0 | 16.0.0 |
^15.0.0 | >=2.22.0 <3.0 | >=2.22.0-0 <=2.30.0-0 | 1.0.3 |
^14.0.0 | >=2.22.0 <3.0 | >=2.22.0-0 <=2.30.0-0 | 1.0.3 |
-
Provider the provideDateFnsAdapter in your app.config.ts.
import { provideDateFnsAdapter } from 'ngx-material-date-fns-adapter'; export const appConfig: ApplicationConfig = { providers: [..., provideDateFnsAdapter()], };
-
Register custom locale token in providers if needed.
import { MAT_DATE_LOCALE } from "@angular/material/core"; import { fr } from 'date-fns/locale'; export const appConfig: ApplicationConfig = { providers: [..., { provide: MAT_DATE_LOCALE, useValue: fr }], };
Use setLocale()
method of the DateAdapter. In case of using setLocale with a Locale argument
import { Component } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
import { enUS, faIR } from 'date-fns/locale';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private _adapter: DateAdapter<any>) {}
changeLocale(value: any): void {
switch (value) {
case 'en-US':
this._adapter.setLocale(enUS);
break;
case 'fa-IR':
this._adapter.setLocale(faIR);
break;
}
}
}
When MAT_DATE_LOCALE tokens are not provided, en-US
locale is used by default.
The most useful commands for development are:
npm run start
to start a development servernpm run build-demo
to build the demo locally (it will be published automatically by GitHub Actions)