ng-gregorian-hijri-datepicker v1.2.0

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.

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 ng-gregorian-hijri-datepicker

API

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

@Inputs()

@Outputs()

Dependencies

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

Usage

1. Install the package npm i ng-gregorian-hijri-datepicker .
2. Import the NgxHijriGregorianDatepickerModule in your app module import { NgxHijriGregorianDatepickerModule } from 'ng-gregorian-hijri-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 'ng-gregorian-hijri-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](https://ng-bootstrap.github.io/#/components/datepicker/overview) , [moment](https://momentjs.com/) , [moment Hijri](https://github.com/xsoh/moment-hijri) .