Angular Hijri Gregorian Calendar(Datepicker)

• Most accurate Hijri, Gregorian calendar(date-picker) on NPM with 100% accuracy percentage.
• Robust and tested code angular hijri/gregorian calendar/date-picker component for Angular 10 - 16, 18+ projects.
• Ionic 3 - 4, 5, 6 + is supported, can be used in iOS and Android.
• Zero dependents package.
• 10 different themes and layouts already built in, you can also customize your own as well.

Dependents

Angular hijri gregorian with Zero dependents that supports conversion between Gregorian and Hijri calendars.

Preview

Background

The Umm Al-Qura calendar is the lunar Hijri calendar officially adopted by Saudi Arabia for administrative purposes. It was originated from Umm Al-Qura newspaper, the official newspaper of government of Saudi Arabia. The newspaper is published weekly and its first issue was on Friday, 15 Jumada al-Ula 1343 AH (12 December 1924 CE). However, the calendar has been printed and distributed separately by the Saudi government since 1346 AH (1927 CE).

The calendar is widely used in Saudi Arabia, especially by the public sector. Official documents, political letters, health care records, and education certificates, are just examples of many other documents that are dated by the Hijri calendar.

However, the Gregorian calendar is the calendar used in most of the world, and it has been implemented as the default calendar in nearly every computer and database.

Examples/Demo

Online demo can be found:

Stackblitz

Github Pages

Star it to inspire us to build the best component!

Features

• Can be used 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 10 - 16, 18 +
Ionic 3 - 4, 5, 6 +
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:

1import { HijriGregorianDatepickerModule } from 'angular-hijri-gregorian-datepicker';
2
3@NgModule({
4  imports: [
5    // ...
6    HijriGregorianDatepickerModule
7  ]
8})

1<hijri-gregorian-datepicker
2  [canChangeMode]="true"
3  [todaysDateSection]="true"
4  [futureValidation]="true"
5  [disableYearPicker]="false"
6  [disableMonthPicker]="false"
7  [disableDayPicker]="false"
8  [multiple]="true"
9  [isRequired]="false"
10  [showConfirmButton]="true"
11  [markToday]="true"
12  [mode]="'greg'"
13  [dir]="'ltr'"
14  [locale]="'en'"
15  [submitTextButton]="'Confirm'"
16  [todaysDateText]="'Today\'s Date'"
17  [ummAlQuraDateText]="'التاريخ الهجرى'"
18  [yearSelectLabel]="'Year'"
19  [monthSelectLabel]="'Month'"
20  [futureValidationMessageEn]="'Selected date cannot be in the future!'"
21  [futureValidationMessageAr]="
22    'التاريخ المحدد لا يمكن ان يكون في المستقبل!'
23    "
24  [pastYearsLimit]="90"
25  [futureYearsLimit]="0"
26  [theme]="'Midnight Blue'"
27  [styles]="stylesConfig"
28  (onSubmit)="onSubmit($event)"
29  (onDaySelect)="onChange($event)"
30  (onMonthChange)="onMonthChangeTest($event)"
31  (onYearChange)="onYearChangeTest($event)"
32></hijri-gregorian-datepicker>

Inside your component.ts:

1  // this called every time when user confirms a selected date
2    onSubmitEvent(code: string) {
3    }
4
5    // this called only every time the use selects a date
6    onChangeEvent(code: string) {
7    }
8
9    // this called every time the month value channges
10    onMonthChangeEvent(code: string) {
11    }
12
13    // this called every time the year value channges
14    onYearChangeEvent(code: string) {
15    }

@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	true	When true the confirm button will be displayed, if false it will be hidden
markToday	boolean	true	When true today date will be marked(bordered), if false it will not be marked
mode	string	greg	Calendar mode, either ummAlQura 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
ummAlQuraDateText	string	التاريخ الهجرى	Text next to checkbox to toggle date todaysDateSection
yearSelectLabel	string	Year	Label of the year select option
monthSelectLabel	string	Month	Label of the month select option
futureValidationMessageEn	string	Selected date cannot be in the future!	English future validation message if futureValidation is set to true
futureValidationMessageAr	string	التاريخ المحدد لا يمكن ان يكون في المستقبل!	Arabic future validation message if futureValidation is set to true
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	{}	Styles for the calendar look and feel
theme	string	Midnight Blue	Different skins and themes for the calendar('Ocean Breeze', 'Lavender Dreams', 'Sunset Glow', 'Midnight Blue', 'Forest Canopy', 'Rosewood Elegance', 'Icy Mint', 'Golden Sand', 'Steel Grey', 'Coral Reef'), and it has priority over styles

Styles

Property	Type	Default	Description
backgroundColor	string	#E3F6F5	Background of the calendar
primaryColor	string	#272343	Color of the today's date, year and month texts
secondaryColor	string	#272343	Background of submit button and selected days in calendar
todaysDateBgColor	string	#272343	Background of "today's date" date section
todaysDateTextColor	string	#fff	Color of "today's date" date section text
confirmBtnTextColor	string	#fff	Color of "Confirm" button text
disabledDayColor	string	#C0C0C0	Disabled days text color
dayNameColor	string	#0d7f91	Day names text color
dayColor	string	#000	Enabled days text color
fontFamily	string	Default-Regular	Font family of the font used globally and pre defined within project
borderRadius	string	8px	Border radius of the each div and button in the calendar layout

@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

Helper Functions

import { DateUtilitiesService } from '../_services/date-utilities.service';

1  constructor(private _dateUtils: DateUtilitiesService) {
2
3  }
4

Output	Description
convertDate	Converts dates from Gregorian to Umm Al Qura and vice versa
checkPastOrFuture	Checks date whether it's future or past date('Future', 'Past', 'Today')
formatDate	Converts date from human-readable string representation(ex. Mon Sep 05 2023 15:30:45 GMT+0200) to separated "/" string(ex. 05/09/2023)
parseDate	The opposite of formateDate function
getGregorianMonthData	Generates an array of objects of Gregorian month passed to it
getUmAlQurraMonthData	Generates an array of objects of Umm Al Qura month passed to it

Contributing

Contributions are more than welcome!

License

MIT License

Copyright (c) 2022 Muhammad Hanafi, Imad Khan