Getting started

Add a Hijri or Gregorian datepicker to an Angular Material app in three steps.

Install

Version 0.4.3 is tagged on GitHub and not yet published to npm. A beta will be published before the stable 1.0.0. When the package is on npm, ng add is the default. It installs the package, adds @internationalized/date when that package is missing, and registers provideHijriDateAdapter().

ng add ngx-mat-hijri-adapter

You can install the packages manually instead:

npm install ngx-mat-hijri-adapter @internationalized/date

Angular core, forms, material, and cdk are peer dependencies too, and are expected to be in the app already. ng add stops when Angular Material is missing.

Requirements

• Angular core, forms, material, cdk 22.0.0 or newer. Signal forms are stable from this version; Angular 21 is not supported.
• @internationalized/date 3.12.0 or newer. CalendarDate is part of the public value type, so it is a peer dependency.

Register the adapter

Register the adapter once in the application providers. The defaults are the Umm al-Qura calendar and the ar-SA locale.

import { provideHijriDateAdapter } from 'ngx-mat-hijri-adapter';

bootstrapApplication(App, {
  providers: [provideHijriDateAdapter()],
});

Use a Material datepicker

A plain Material datepicker now works with CalendarDate values:

A form that must store a Date uses a plain mat-datepicker with provideNativeHijriDateAdapter(). Read Native adapter.

date = new FormControl<CalendarDate | null>(null);

<mat-form-field>
  <mat-label>Date</mat-label>
  <input matInput [matDatepicker]="picker" [formControl]="date" />
  <mat-datepicker-toggle matIconSuffix [for]="picker" />
  <mat-datepicker #picker />
</mat-form-field>

Or use a ready-made field

The fields add the calendar toggle, an equivalent-date hint, and error messages. Follow the guide for the forms you use.

Next, read about Calendar values or the shared Form fields guide.