Angular Hijri Gregorian Calendar(Datepicker)
- Robust and tested code angular hijri/gregorian calendar/datepicker component for Angular 7 - 12, 13, 14+ projects.
- Ionic 3, 4, 5 + is supported, can be used in iOS and Android
Preview
Examples/Demo
Online demo can be found here
Star it to inspire us to build the best component!
Features
- Can be used only as a calendar or a datepicker.
- RTL and LTR support
- 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 or readonly.
- Very easy to customize.
- Can select Multiple dates.
- Event listeners for all datepicker events.
- Can customize future and past years number.
- Responsive desing for web and mobile.
Supported platforms
Angular 7, 8, 9, 10, 11, 12, 14 +
Ionic 3, 4, 5 +
Mobile browsers and WebViews on: Android and iOS
Desktop browsers: Chrome, Firefox, Safari, Edge v.79 +
Other browsers: Edge v.41 - 44 (without code hidden feature)
Installation
$ npm install angular-hijri-gregorian-datepicker
Usage
Import HijriGregorianDatepickerModule
in your app module or page module:
import { HijriGregorianDatepickerModule } from 'angular-hijri-gregorian-datepicker';
@NgModule({
imports: [
// ...
HijriGregorianDatepickerModule
]
})
<hijri-gregorian-datepicker
[canChangeMode]="true"
[todaysDateSection]="true"
[futureValidation]="false"
[disableYearPicker]="false"
[disableMonthPicker]="false"
[disableDayPicker]="false"
[multiple]="false"
[isRequired]="true"
[mode]="'hijri'"
[dir]="'ltr'"
[locale]="'en'"
[submitTextButton]="'Confirm'"
[todaysDateText]="'Todays\'s Date'"
[hijriDateText]="'Hijri Date'"
[pastYearsLimit]="20"
[futureYearsLimit]="0"
[styles]="stylesConfig"
(onSubmit)="onSubmitTest($event)"
(onDaySelect)="onChangeTest($event)"
(onMonthChange)="onMonthChangeTest($event)"
(onYearChange)="onYearChangeTest($event)"
></hijri-gregorian-datepicker>
Inside your component.ts:
// this called every time when user confirms a selected date
onSubmitEvent(code: string) {
}
// this called only every time the use selects a date
onChangeEvent(code: string) {
}
// this called every time the month value channges
onMonthChangeEvent(code: string) {
}
// this called every time the year value channges
onYearChangeEvent(code: string) {
}
@Inputs()
Property | Type | Default | Description |
---|---|---|---|
canChangeMode |
boolean | true |
When true the user can toggle calendar modes, if false the user has only one calendar mode |
todaysDateSection |
boolean | true |
When true the section with current today date will be shown, if false it will be hidden |
futureValidation |
boolean | true |
When true the user cannot choose any future dates, if false user can select future dates |
disableYearPicker |
boolean | false |
When true the user cannot select different years, if false year select will be enabled |
disableMonthPicker |
boolean | false |
When true the user cannot select different months, if false month select will be enabled |
disableDayPicker |
boolean | false |
When true the user cannot select days, if false days select will be enabled |
multiple |
boolean | false |
When true the user can select multiple days, if false only one date can be selected |
isRequired |
boolean | true |
When true the confirm button will be disabled until user selects a date, if false the button will be enabled |
showConfirmButton |
boolean | trie |
When true the confirm button will be displayed, if false it will be hidden |
mode |
string | greg |
Calendar mode, either hijri or greg
|
dir |
string | ltr |
Layout direction, either ltr or rtl
|
locale |
string | en |
The language of the calendar layout, either ar or en
|
submitTextButton |
string | Confirm |
Confirm button text value |
todaysDateText |
string | Todays\'s Date |
Today's date text in todaysDateSection
|
hijriDateText |
string | Hijri Date |
Hijri date text(checkbox) |
pastYearsLimit |
number | 90 |
indicates for the past years number you want to allow user to select from |
futureYearsLimit |
number | 0 |
indicates for the future years number you want to allow user to select from |
styles |
object | 0 |
indicates for the future years number you want to allow user to select from |
@Outputs()
Output | Description |
---|---|
onSubmit |
Will be called every time when a user submits a selected date |
onDaySelect |
Will be called every time when a user selects new date |
onMonthChange |
Will be called every time the month value changes |
onYearChange |
Will be called every time the year value changes |
Dependencies
Angular hijri gregorian based on moment-hijri
that supports coversion between Gregorian and Hijri calendars.
Contributing
Contributions are more than welcome!
License
MIT License
Copyright (c) 2022 Muhammad Hanafi