Hijri Gregorian Datepicker

• 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.
• Now It supports Angular v12.

Examples/Demo

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.

Features

• 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.

Installation

npm i ngx-hijri-gregorian-datepicker

API

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

@Inputs()

| 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. |

@Outputs()

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

Dependencies

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

Usage

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

<hijri-gregorian-datepicker
   		[label]="'Birth Date'"
   		[(selectedDate)]="selectedDate"
   		[isRequired]="true"
   		[GregLabel]="'Gregorian'"
   		[hijriLabel]  ="'Hijri'"
   		[selectedDateType]="selectedDateType"
   		#datePicker>
</hijri-gregorian-datepicker>`

4. 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()  {}

}

Utilities

DateFormatterService

| Method| Parameter | Return| Description | |--|--|--| -- | |ToBindableHijroDate(hijriDate)|hijriDate:string|NgbDate| Recive hijri date came from server as a string and convert to NgbDate to be binded to the component. Defualt format (iD/iM/iYY HH:mm:ss tt)| |ToBindableHijroDateUsingFormat(hijriDate,format)|hijriDate:string, format:string|NgbDate| Same as prev method with ability to provide format of receiving date. | |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|

Credits

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