hijri-gregorian-datepicker-en v1.0.0

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()

@Outputs()

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](https://ng-bootstrap.github.io/#/components/datepicker/overview) , [moment](https://momentjs.com/) , [moment Hijri](https://github.com/xsoh/moment-hijri) .