Native adapter
provideNativeHijriDateAdapter() is an alternative.
Restrictions
- It is for a plain mat-datepicker. provideNativeHijriDateAdapter() stores a Date.
- 1 Ramadan 1445 is stored as the Gregorian instant 2024-03-11T12:00:00.000Z.
- The ready-made fields store a CalendarDate so the toggle can change the calendar on screen while valueCalendar stays the saved value. A Gregorian field can show 1/9/1445 and still hold Gregorian 2024-03-11. A Date cannot do that, because it has no calendar to keep. The fields also add the hint. They do not use this provider.
- A Date has no calendar, so valueCalendar does not apply. There is no toggle on this path. A toggle here would only change the text on screen.
- calendarOf() does not apply. One Date is both 1 Ramadan 1445 and 11 March 2024.
- Hijri month names come from Intl and can differ between browsers.
- Hijri day math uses this package's Umm al-Qura table, limited to AH 1300–1599.
- JSON.stringify writes the Gregorian instant, not 1445-09-01.
- Loading ngx-mat-hijri-adapter/native still loads the main entry, so @internationalized/date stays installed.
reactive and signal fields store a CalendarDate and do not use this provider.
Examples
Umm al-Qura
A datepicker on the native adapter, with a Ramadan 1445 range and a Friday filter.
ngx-mat-hijri-adapter/nativeDemo
TypeScript
HTML
Gregorian
The same adapter in the Gregorian calendar. 11 March 2024 is 1 Ramadan 1445.
ngx-mat-hijri-adapter/nativeDemo
TypeScript
HTML