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

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 .

1. Import the NgxHijriGregorianDatepickerModule in your app module

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

1. In template

``` [label]="'Birth Date'"

[(selectedDate)]="selectedDate"

[isRequired]="true"

[GregLabel]="'Gregorian'"

[hijriLabel]  ="'Hijri'"

[selectedDateType]="selectedDateType"

#datePicker>

` ```

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

Utilities

DateFormatterService

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

Credits

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