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