Angular Hijri Gregorian Calendar(Datepicker)

Most accurate Hijri, Gregorian caleandar(datepicker) on NPM store with 100% accuracy percentage.
Robust and tested code angular hijri/gregorian calendar/datepicker component for Angular 10 - 16, 17+ projects.
Ionic 3 - 4, 5, 6 + is supported, can be used in iOS and Android.
Zero dependents package.

Dependents

Angular hijri gregorian with Zero dependents that supports coversion 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, 17 +
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:

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]="true"
    [isRequired]="false"
    [showConfirmButton]="true"
    [markToday]="true"
    [mode]="'greg'"
    [dir]="'ltr'"
    [locale]="'en'"
    [submitTextButton]="'Confirm'"
    [todaysDateText]="'Today\'s Date'"
    [ummAlQuraDateText]="'التاريخ الهجرى'"
    [yearSelectLabel]="'Year'"
    [monthSelectLabel]="'Month'"
    [futureValidationMessageEn]="'Selected date cannot be in the future!'"
    [futureValidationMessageAr]="
    'التاريخ المحدد لا يمكن ان يكون في المستقبل!'
    "
    [pastYearsLimit]="90"
    [futureYearsLimit]="0"
    [styles]="stylesConfig"
    (onSubmit)="onSubmit($event)"
    (onDaySelect)="onChange($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	`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

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

@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 { HijriGregorianDatepickerService } from 'angular-hijri-gregorian-datepicker';

  constructor(private calendarService: HijriGregorianDatepickerService) {

  }

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 seperated "/" 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

hanafnafs/angular-hijri-gregorian-datepicker