Neoanthropic Preternatural Murmurings
    Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    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 .
    2. Import the NgxHijriGregorianDatepickerModule in your app module import { NgxHijriGregorianDatepickerModule } from 'ngx-hijri-gregorian-datepicker';
    3. 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';  
    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 .


    npm i ngx-hijri-gregorian-datepicker

    DownloadsWeekly Downloads






    Unpacked Size

    344 kB

    Total Files


    Last publish


    • avatar