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/

Installing

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
^19.0.0	>=2.22.0 <5.0	>=2.22.0-0 <=5.0.0-0	latest
^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.

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

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;
    }
  }
}

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)