https://github.com/mohsen77sk/angular-material-date-fns-adapter
Angular material date-fns adapter (Support jalali)
https://github.com/mohsen77sk/angular-material-date-fns-adapter
angular angular-material date-fns date-fns-jalali jalali shamsi
Last synced: 5 months ago
JSON representation
Angular material date-fns adapter (Support jalali)
- Host: GitHub
- URL: https://github.com/mohsen77sk/angular-material-date-fns-adapter
- Owner: mohsen77sk
- License: mit
- Created: 2022-08-21T04:11:30.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-25T09:26:35.000Z (11 months ago)
- Last Synced: 2025-05-11T03:58:56.400Z (5 months ago)
- Topics: angular, angular-material, date-fns, date-fns-jalali, jalali, shamsi
- Language: TypeScript
- Homepage:
- Size: 2.45 MB
- Stars: 37
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular material date-fns adapter (Support jalali)
[](LICENSE) [](http://badge.fury.io/js/ngx-material-date-fns-adapter) [](https://github.com/mohsen77sk/angular-material-date-fns-adapter/actions)
## 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
### Install [ngx-material-date-fns-adapter](https://www.npmjs.com/package/ngx-material-date-fns-adapter)
```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 |
| --------------- | ---------------- | ----------------------- | ------------------------------------- |
| ^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.
```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](https://github.com/date-fns/date-fns/tree/main/src/locale)
## 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)](LICENSE)