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

Installing

$3

``sh
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 |
| --------------- | ---------------- | ----------------------- | ------------------------------------- |
| ^20.0.0 | >=2.22.0 <5.0 | >=2.22.0-0 <=5.0.0-0 | latest |
| ^19.0.0 | >=2.22.0 <5.0 | >=2.22.0-0 <=5.0.0-0 | 19.0.0 |
| ^18.0.0 | >=2.22.0 <4.0 | >=2.22.0-0 <=3.6.0-0 | 18.0.0 |
| ^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 |

Usage

Provider the provideDateFnsAdapter and Register locale token in providers in your app.config.ts.

`typescript
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { provideDateFnsAdapter } from 'ngx-material-date-fns-adapter';
import { enUS } from 'date-fns/locale';

export const appConfig: ApplicationConfig = {
providers: [
...,
provideDateFnsAdapter(),
{ provide: MAT_DATE_LOCALE, useValue: enUS }
],
};
`

Change locale dynamically

Use setLocale() method of the DateAdapter. In case of using setLocale with a Locale argument

`typescript
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) {}

changeLocale(value: any): void {
switch (value) {
case 'en-US':
this._adapter.setLocale(enUS);
break;
case 'fa-IR':
this._adapter.setLocale(faIR);
break;
}
}
}
`

Supported locales

See project for details

Development

The most useful commands for development are:

* npm run start to start a development server
* npm run build-demo` to build the demo locally (it will be published automatically by GitHub Actions)

License

The MIT License (MIT)