Angular Material Jalali Date Adapter

A comprehensive Angular library that provides Jalali (Persian/Solar Hijri/ Shamsi/ ) date adapter fro angular material datepicker component. Angular material datepicker does not support Jalali date natively but you can write adapter for custom date formats and systems, this library include adapters for adopting Jalali date systems with date object and string and zero dependency like moment and etc.

Working with date in JS have been being hard for ages, Working with other date systems like jalali is even harder. There are bunch of JS libraries utilizing date operations and most of them like moment and date-fns has related dateAdapter in material library but they can not be used easily with jalali system. Also since introduction of Intl api basic date operation can be done with vanilla JS easier and also there are not many formats for jalali system (It can be said always yyyy/MM/dd is used) so you may not want to include a heavy library in your project anymore.

This library provide two adapter for material for adopting jalai system. One assume native date object as input and another accept string in standard jalai format (yyyy/MM/dd)

• 🗓️ Work with both Date object and string input
• 📅 Compatible with mat-datepicker, mat-date-range-picker, and related components
• ⚡ Zero dependency
• ⚡ Lightweight and performant
• 🔧 Easy integration with existing Angular Material projects

npm install npm i angular-material-jalali-datepicker-adapter

Or using yarn:

yarn add angular-material-jalali-datepicker-adapter

stackblitz demo

This is developed and tested on angular and angular material 19 but it supposed to work with all previous and later supported version because there has not been any breaking change in material datepicker since introduction.

1. Import the module in your Angular application:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { provideJalaiDateAdapter } from 'AngularMaterialJalaliDatepickerAdapter';

@Component({
  selector: 'app-normal-datepicker-demo',
  imports: [
    ReactiveFormsModule,
    MatDatepickerModule,
    MatInputModule,
    MatFormFieldModule,
  ],
  templateUrl: './normal-datepicker-demo.component.html',
  styleUrl: './normal-datepicker-demo.component.scss',
  providers: [
      provideJalaiDateAdapter()

  ],
})
export class MyComponent {
    ////
}

provideJalaiDateAdapter accept an argument with type 'date' | 'string' (default is 'date'), if you pass string datepicker will work with string date input in format 'yyyy/MM/dd' otherwise native Date object is needed.

You can also pass providers separately

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { JALALI_DATE_FORMATS, MaterialJalaliDateAdapter, MaterialJalaliStringDateAdapter } from 'AngularMaterialJalaliDatepickerAdapter';

@Component({
  selector: 'app-normal-datepicker-demo',
  imports: [
    ReactiveFormsModule,
    MatDatepickerModule,
    MatInputModule,
    MatFormFieldModule,
  ],
  templateUrl: './normal-datepicker-demo.component.html',
  styleUrl: './normal-datepicker-demo.component.scss',
  providers: [
    {
      provide: DateAdapter,
      useClass: MaterialJalaliDateAdapter,//or MaterialJalaliStringDateAdapter
    },
    { provide: MAT_DATE_LOCALE, useValue: 'fa-IR' },
    { provide: MAT_DATE_FORMATS, useValue: JALALI_DATE_FORMATS },

  ],
})
export class MyComponent {
    ////
}

For more information about Angular Material datepicker, visit the official documentation.

2. Use with Angular Material date picker:

<mat-form-field>
  <mat-label>تاریخ تولد</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

provideJalaiDateAdapter accept an argument with type 'date' | 'string' (default is 'date'), if you pass string datepicker will work with string date input in format 'yyyy/MM/dd' otherwise native Date object is needed.

Its returns all there needed providers to customize datepicker

material dateAdapter witch adopts jalali system and works with native date object.

material dateAdapter witch adopts jalali system and works with standard string format (yyyy/MM/dd).

Both adapters use JalaliDateService for date operations. You can use this service for basic operations directly.

We welcome contributions!

1. Clone the repository:

git clone https://github.com/aliqb/angular-material-jalali-datepicker-adapter

2. Install dependencies:

npm install

3. lib source code is in projects/angular-material-jalali-datepicker-adapter

• Conversions between Jalali and Gregorian has been done by adopting codes of jalali-ts

Made with ❤️ for the Persian developer community

This project is licensed under the MIT License - see the LICENSE file for details.