Angular hijri/gregorian calendar/datepicker component for Angular 7 - 12, 14+ projects.
Robust and tested code angular hijri/gregorian calendar/datepicker component for Angular 7 - 12, 14+ projects.
Ionic 3, 4, 5 + is supported, can be used in iOS and Android.
Star it to inspire us to build the best component!
Online demo can be found here
- 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.
Angular 7, 8, 9, 10, 11, 12, 14 +
Ionic3, 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)
$ npm install angular-hijri-gregorian-datepicker
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]="true"
[disableYearPicker]="false"
[disableMonthPicker]="false"
[disableDayPicker]="false"
[multiple]="false"
[mode]="'hijri'"
[dir]="'rtl'"
[locale]="'en'"
[submitTextButton]="'Confirm'"
[todaysDateText]="'Todays\'s Date'"
[hijriDateText]="'Hijri Date'"
[pastYearsLimit]="20"
[futureYearsLimit]="10"
(onSubmit)="onSubmitTest($event)"
(onChange)="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) {
}
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 |
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 |
Output | Description |
---|---|
onSubmit |
Will be called every time when a user submits a selected date |
onChange |
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 |
Angular hijri gregorian based on moment-hijri
that supports coversion between Gregorian and Hijri calendars.
Contributions are more than welcome!
MIT License
Copyright (c) 2022 Muhammad Hanafi