Angular material date-fns adapter (Support jalali)
What is this?
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.
Demo
https://mohsen77sk.github.io/angular-material-date-fns-adapter/
Install
ngx-material-date-fns-adapter
Installnpm 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.
Compatibility
@angular/core
: ^14.0.0@angular/material
: ^14.0.0date-fns
: ^2.29.0date-fns-jalali
: ^2.29.0
Usage
-
Register the NgxMatDateFnsModule in your app module.
import { NgxMatDateFnsModule } from 'ngx-material-date-fns-adapter'; @NgModule({ ... imports: [ ... NgxMatDateFnsModule, ], ... }) export class AppModule { }
-
Register custom locale token in providers if needed.
import { MAT_DATE_LOCALE } from "@angular/material/core"; import { fr } from 'date-fns/esm/locale'; @NgModule({ ... providers: [{ provide: MAT_DATE_LOCALE, useValue: fr }] ... }) export class AppModule { }
Change locale dynamically
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/esm/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;
}
}
}
Default locale
When MAT_DATE_LOCALE tokens are not provided, en-US
locale is used by default.
Development
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)