Features
- One
DateAdapter for both calendars, switchable at runtime.
- Locale is independent of calendar: an English Hijri picker or an Arabic Gregorian picker both work.
- Ready-made date and date range fields for reactive forms and for signal forms.
- An optional Hijri/Gregorian toggle on each field, with a hint showing the date in the other calendar.
- The default adapter stores
CalendarDate objects, so no time zone shifts a day. The ready-made fields use that value so the calendar toggle can change the text on screen while valueCalendar stays the saved calendar. ngx-mat-hijri-adapter/native is the alternative for a plain mat-datepicker that stores a JavaScript Date at UTC noon. See the native adapter page.
Status and installation
Version 0.4.3 is tagged on GitHub. It is not yet published to npm. A beta will be published before the stable 1.0.0. Once the package is on npm, add it to an Angular Material app:
ng add ngx-mat-hijri-adapter
ng add installs this package, adds @internationalized/date when it is missing, and registers provideHijriDateAdapter(). It stops if Angular Material is missing. You can install the packages manually instead:
npm install ngx-mat-hijri-adapter @internationalized/date
Requirements
- Angular
core, forms, material, and cdk 22.0.0 or newer.
@internationalized/date 3.12.0 or newer.
Quick start
Register the adapter once. The defaults are the Umm al-Qura calendar and the ar-SA locale.
import { provideHijriDateAdapter } from 'ngx-mat-hijri-adapter';
bootstrapApplication(App, {
providers: [provideHijriDateAdapter()],
});
A plain mat-datepicker now works with CalendarDate values. Or use a ready-made field:
import { ReactiveDateField } from 'ngx-mat-hijri-adapter/reactive';
<ngx-mat-reactive-date-field [formControl]="date" label="Date" calendarToggle />
Entry points
| Import | Contents |
|---|
ngx-mat-hijri-adapter | HijriDateAdapter, its provider, formatting, calendar helpers |
ngx-mat-hijri-adapter/reactive | ReactiveDateField and ReactiveDateRangeField |
ngx-mat-hijri-adapter/signals | SignalDateField and SignalDateRangeField |
Configuration, parsing, formatting, field inputs, right-to-left, and the full API are covered in the documentation.
Development
Building this workspace needs Node.js ^22.22.3, ^24.15.0, or 26 or newer. The docs app imports the built package from dist/, so build the library first:
npm ci
npm test
npm run build
npm start
Contributing
Pull requests target development. See CONTRIBUTING.md.
Changelog
See CHANGELOG.md.
License
Apache 2.0. Copyright 2026 Mahmoud.
