- 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 introducedng g library
schematics. - Now It supports Angular v12.
Online demo can be found here
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.
- Install the package
npm i ngx-hijri-gregorian-datepicker
. - Import the
NgxHijriGregorianDatepickerModule
in your app moduleimport { NgxHijriGregorianDatepickerModule } from 'ngx-hijri-gregorian-datepicker';
- In template
<hijri-gregorian-datepicker
[label]="'Birth Date'"
[(selectedDate)]="selectedDate"
[isRequired]="true"
[GregLabel]="'Gregorian'"
[hijriLabel] ="'Hijri'"
[selectedDateType]="selectedDateType"
#datePicker>
</hijri-gregorian-datepicker>`
- 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() {}
}
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 |
This project is based on ng-bootstrap , moment , moment Hijri .