Angular material date-fns adapter (Support jalali)

Overview

Angular material date-fns adapter (Support jalali)

MIT licensed npm version Build Status

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/

Install

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.

Compatibility

  • @angular/core: ^14.0.0
  • @angular/material: ^14.0.0
  • date-fns: ^2.29.0
  • date-fns-jalali: ^2.29.0

Usage

  1. Register the NgxMatDateFnsModule in your app module.

    import { NgxMatDateFnsModule }  from 'ngx-material-date-fns-adapter';
    
    @NgModule({
      ...
      imports: [
        ...
        NgxMatDateFnsModule,
      ],
      ...
    })
    export class AppModule { }
  2. Register custom locale token in providers if needed.

    import { MAT_DATE_LOCALE } from "@angular/material/core";
    import { fr } from 'date-fns/esm/locale';
    
    @NgModule({
      ...
      providers: [{ provide: MAT_DATE_LOCALE, useValue: fr }]
      ...
    })
    export class AppModule { }

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/esm/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)

You might also like...

Adapter application for consuming web3 messages from ie. wallets, and passing them on to starknet

🐍 StarknNet web3 account Development setup Clone deps with submodules git clone --recurse-submodules [email protected]:software-mansion-labs/starknet-we

Nov 21, 2022

Debug Adapter Protocol for Amiga development with FS-UAE or WinUAE

UAE Debug Adapter Protocol Debug Adapter Protocol for Amiga assembly development with FS-UAE or WinUAE. Adapted from @prb28's vscode-amiga-assembly ex

Jul 7, 2022

Qwik City adapter for trpc.io

Qwik City adapter for trpc.io

tRPC 🤝 Qwik City End-to-end typesafe APIs made easy with tRPC.io in Qwik City applications. Build & consume fully typesafe APIs, without schemas or c

Oct 11, 2022

SQL-based database adapter for AdminJS

adminjs-sql This is an inofficial AdminJS adapter which integrates SQL-based database into AdminJS. Installation: yarn add adminjs-sql Usage The plugi

Sep 9, 2022

Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Angular 14 File Upload to Firebase Storage example I will show you how to make Angular 14 Firebase Storage: File Upload/Display/Delete Application usi

Sep 7, 2022

Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor Implementing Angular 14 Refresh Token before Expiration with Http Interceptor and JWT. You

Nov 30, 2022

A website for tracking community support for BIP21 QR codes that support on-chain and lightning bitcoin payments.

BIP21 Microsite This is a WIP microsite to promote the usage of a BIP21 payment URI QR code that can include lightning invoices or offers. Wallet supp

Nov 27, 2022

Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all with IndexedDB. Perfectly suitable for your next (PWA) app.

Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all with IndexedDB. Perfectly suitable for your next (PWA) app.

BrowstorJS 🚀 💾 🔒 Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all

Aug 5, 2022

A JavaScript lib with more functions for the normal Date class.

A JavaScript lib with more functions for the normal Date class.

Jan 26, 2022
Releases(1.0.0)
Owner
mohsen
mohsen
A Drop-in Jalali Replacement for filament DateTimePicker

Filament Jalali Date Time Picker Field This package is a Drop-in replacement for DatePicker and DateTimePicker field type you just need to replace tho

AriaieBOY 8 Dec 3, 2022
A javascript solar (jalali) datepicker for HTML.

jdatepicker A Javascript solar (jalali) datepicker for HTML. Installation Install via NPM: npm install jdatepicker Install via CDN <script src="https:

Habibullah Mohammadi 11 Sep 15, 2022
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my initial appointment date. It doesn't handle rescheduling.

US-visa-appointment-notifier This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my in

Theophilus Omoregbee 13 Jan 4, 2023
Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

Stephanie Eckles 65 Nov 2, 2022
Projeto desenvolvido em Angular e Material, para conclusão do curso de extensão em Java

EmpresaFront This project was generated with Angular CLI version 13.0.4. Development server Run ng serve for a dev server. Navigate to http://localhos

Carolina Rodrigues 5 Mar 18, 2022
An adapter where you can define which function to run

Switch Functions An adapter where you can define which function to run Installation This is a Node.js module available through the npm registry. Befor

Badass Team 2 Jun 17, 2022
A Feathers service adapter for Prisma ORM.

feathers-prisma A Feathers service adapter for Prisma ORM. Installation npm install feathers-prisma --save Documentation This adapter supports all me

Phil 27 Dec 9, 2022
🔨 A more engineered, highly customizable, standard output format commitizen adapter.

cz-git Github | Installation | Website | 简体中文文档 Introduction A more engineered, highly customizable, standard output format commitizen adapter. What i

zhengqbbb 402 Dec 31, 2022
An example on how to use Solana Wallet Adapter as a Web Authentication Method.

Solana Wallet Auth: A FullStack example This example uses Solana's wallet adapter to sign messages and verifies their signatures on the backend, allow

Kevin Rodríguez 19 Dec 20, 2022