angular-material-date-fns-adapter

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #golang #go #machine-learning #linux #docker #nodejs #windows #cli #openai #mcp

angular-material-date-fns-adapter

(★ 40)

Angular material date-fns adapter (Support jalali)

angular-material-date-fns-adapter Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Angular material date-fns adapter (Support jalali)

[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/mohsen77sk/angular-material-date-fns-adapter/master/LICENSE) [![npm version](https://badge.fury.io/js/ngx-material-date-fns-adapter.svg)](http://badge.fury.io/js/ngx-material-date-fns-adapter) [![Build Status](https://github.com/mohsen77sk/angular-material-date-fns-adapter/workflows/main/badge.svg)](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

<https://mohsen77sk.github.io/angular-material-date-fns-adapter/>

## 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 |
| --------------- | ---------------- | ----------------------- | ------------------------------------- |
| ^22.0.0         | >=2.22.0 <5.0    | >=2.22.0-0 <=5.0.0-0    | latest                                |
| ^21.0.0         | >=2.22.0 <5.0    | >=2.22.0-0 <=5.0.0-0    | 21.0.0                                |
| ^20.0.0         | >=2.22.0 <5.0    | >=2.22.0-0 <=5.0.0-0    | 20.0.0                                |
| ^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<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](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)

angular-material-date-fns-adapter

angular-material-date-fns-adapter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

angular-material-date-fns-adapter

angular-material-date-fns-adapter Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README