mohsen77sk / angular-material-date-fns-adapter

Angular material date-fns adapter (Support jalali)

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

Angular version 17.x.x

npm install date-fns date-fns-jalali ngx-material-date-fns-adapter

Angular version 16.x.x

npm install [email protected] [email protected] [email protected]

Angular version 15.x.x or 14.x.x

npm install [email protected] [email protected] [email protected]

Both date-fns and date-fns-jalali libraries are peer dependencies, but required for the compilation.

Usage

1. Provider the provideDateFnsAdapter in your app.config.ts.

   import { provideDateFnsAdapter } from 'ngx-material-date-fns-adapter';
   
   export const appConfig: ApplicationConfig = {
     providers: [..., provideDateFnsAdapter()],
   };

2. 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 }],
   };

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

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 server
• npm run build-demo to build the demo locally (it will be published automatically by GitHub Actions)

License

The MIT License (MIT)

angular-material-date-fns-adapter's Issues

add timepicker