angular-hijri-gregorian-datepicker

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