* Lightweight **Angular** datepicker based on [ng-bootstrap]( that supports **Gregorian** and **Hijri** calendars. * Provides ability to swap between **Gregorian** and **Hijri** calendars

Downloads in past


341.1.02 years ago4 years agoMinified + gzip package size for ngx-hijri-gregorian-datepicker in KB


Hijri Gregorian Datepicker
  • Lightweight Angular datepicker based on ng-bootstrap that supports Gregorian and Hijri calendars.
  • Provides ability to swap between Gregorian and Hijri calendars
  • Converting selected date back and forth when changing calendar type.
  • Provides service DateFormatterService to help converting date formats in both calendars types.
  • It is developed using Angular >=7.0.0 and its newly introduced ng g library schematics.
  • This project was generated with Angular CLI version 7.3.9.


Online demo can be found here

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.


  • Easy to switch between Gregorian and Hijri calendars.
  • Ability to specify the default calendar type either Gregorian or Hijri.
  • Converting dates when changing type of calendar.
  • Ability to specify min and max value for Gregorian and Hijri.
  • Ability to make it required , readonly or disabled.


>npm i ngx-hijri-gregorian-datepicker


>import { NgxHijriGregorianDatepickerModule } from 'ngx-hijri-gregorian-datepicker';


| Input| Type| Required| Description | |--|--|--| -- | |selectedDateType|DateType|No| Default calendar type , will be hijri if not sepcified. | |selectedDate|NgbDateStruct|No| Date to bind (two way binding). | |label|string|Yes| Label will be shown besides the input. | |readonly|bool|No| Specify if user can write in input manually without selecting from datepicker. | |isRequired|bool|No| Specify required or not field. | |disabled|bool|No| Specify disabled or not. | |minHijri|NgbDateStruct|No| Minimum allowed hijri date to select. | |maxHijri|NgbDateStruct|No| Maximum allowed hijri date to select. | |minGreg|NgbDateStruct|No| Minimum allowed Gregorian date to select. | |maxGreg|NgbDateStruct|No| Maximum allowed Gregorian date to select. | |hijriLabel|string|No| Label for Hijri button , will be 'Hijri' By Default. | |GregLabel|string|No| Label for Gregorian button , will be 'Gregorian' By Default. |


| Output| Type| Required| Description | |--|--|--| -- | |selectedDateChange|EventEmitter of NgbDateStruct |--| Emitted after selecting date from picker. |


Make sure that @ng-bootstrap/ng-bootstrap and bootstrap with appropriate versions to angular 7.


  1. Install the package npm i ngx-hijri-gregorian-datepicker .
  1. Import the NgxHijriGregorianDatepickerModule in your app module
`import  {  NgxHijriGregorianDatepickerModule  }  from  'ngx-hijri-gregorian-datepicker';`
  1. In template
``` [label]="'Birth Date'"
[hijriLabel]  ="'Hijri'"
` ```
  1. In typescript file
``` import { NgbDate } from '@ng-bootstrap/ng-bootstrap'; import { DateType } from 'ngx-hijri-gregorian-datepicker'; @Component({...}) export class AppComponent { date: NgbDate; selectedDateType = DateType.Hijri; // or DateType.Gregorian constructor() {} } ```


| Method| Parameter | Return| Description | |--|--|--| -- | |ToGregorianDateStruct()|gregorianDate: string, format:string|NgbDate|Convert string gregorian date to date struct. | |ToHijriDateStruct()|hijriDate:string, format:string|NgbDate| Convert string hijri date to date struct. | |ToHijri(date)|NgbDateStruct|NgbDateStruct| Convert Gregorian date struct to Hijri struct. | |ToGregorian(date)|NgbDateStruct|NgbDateStruct|Convert Hijri date struct to Gregorian struct.| |ToString(date)|NgbDateStruct|string|Convert date struct to string dd/mm/yyyy| |GetTodayHijri()|--|NgbDateStruct|Get Today's date as hijri.| |GetTodayGregorian()|--|NgbDateStruct|Get Today's date as gregorian.|


This project is based on ng-bootstrap , moment , moment Hijri .