ngx-mat-hijri-adapter

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.