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 15 - 21+ 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.
• Date range validation with min/max date support.
• Past date validation to prevent selection of past dates.
• Disabled specific dates for blocking holidays or unavailable dates.
• Date range selection mode for selecting start and end dates.
• Responsive desing for web and mobile.

Supported platforms

Angular 15 - 21+ 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

For Module-based Applications

Import HijriGregorianDatepickerModule in your app module or page module:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HijriGregorianDatepickerModule } from 'angular-hijri-gregorian-datepicker';

@NgModule({
  imports: [
    FormsModule, // Required for ngModel binding
    HijriGregorianDatepickerModule
  ]
})
export class AppModule { }

For Standalone Applications (Angular 15+)

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HijriGregorianDatepickerModule } from 'angular-hijri-gregorian-datepicker';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, HijriGregorianDatepickerModule],
  template: `<hijri-gregorian-datepicker></hijri-gregorian-datepicker>`
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

<hijri-gregorian-datepicker
  [canChangeMode]="true"
  [futureValidation]="true"
  [pastDateValidation]="false"
  [hideYearPicker]="false"
  [hideMonthPicker]="false"
  [disableDayPicker]="false"
  [showNavigationArrows]="true"
  [multiple]="true"
  [isRequired]="false"
  [showConfirmButton]="true"
  [enableAnimations]="true"
  [mode]="'greg'"
  [dir]="'ltr'"
  [locale]="'en'"
  [submitTextButton]="'Confirm'"
  [futureValidationMessageEn]="'Selected date cannot be in the future!'"
  [futureValidationMessageAr]="
    'التاريخ المحدد لا يمكن ان يكون في المستقبل!'
    "
  [pastDateValidationMessageEn]="'Selected date cannot be in the past!'"
  [pastDateValidationMessageAr]="'التاريخ المحدد لا يمكن ان يكون في الماضي!'"
  [pastYearsLimit]="90"
  [futureYearsLimit]="0"
  [theme]="'Midnight Blue'"
  [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) {
    }

Advanced Features

Date Range Validation

Restrict user selection to specific date ranges using minDate and maxDate:

<hijri-gregorian-datepicker
  [minDate]="'01/01/2020'"
  [maxDate]="'31/12/2025'"
  [mode]="'greg'"
  (onSubmit)="onSubmit($event)">
</hijri-gregorian-datepicker>

Disabled Specific Dates

Block specific dates like holidays or maintenance periods:

<hijri-gregorian-datepicker
  [disabledDates]="['25/12/2024', '01/01/2025', '15/08/2024']"
  [mode]="'greg'"
  (onSubmit)="onSubmit($event)">
</hijri-gregorian-datepicker>

Date Range Selection

Enable range selection mode for booking periods or reporting ranges:

<hijri-gregorian-datepicker
  [rangeSelection]="true"
  [multiple]="false"
  [mode]="'greg'"
  (onSubmit)="onRangeSubmit($event)">
</hijri-gregorian-datepicker>

// Component method to handle range selection
onRangeSubmit(dateRange: DayInfo[]) {
  if (dateRange && dateRange.length === 2) {
    const startDate = dateRange[0];
    const endDate = dateRange[1];
    console.log('Range selected:', startDate.gD, 'to', endDate.gD);
  }
}

Initial Date Setting

Set a specific date for the calendar to open to:

<hijri-gregorian-datepicker
  [initialDate]="'15/03/2025'"
  [mode]="'greg'"
  (onSubmit)="onSubmit($event)">
</hijri-gregorian-datepicker>

// Component properties for dynamic initial date
export class MyComponent {
  appointmentDate = '20/05/2025';
  
  // Calendar will open to May 2025 showing the appointment date
}

Built-in Themes

The datepicker comes with 10 beautiful built-in themes:

<hijri-gregorian-datepicker
  [theme]="'Dark Mode'"
  [mode]="'greg'"
  (onSubmit)="onSubmit($event)">
</hijri-gregorian-datepicker>

Available themes:

• Dark Mode - Professional dark theme for modern applications
• Ocean Breeze - Light blue oceanic theme
• Lavender Dreams - Soft purple theme
• Sunset Glow - Warm orange theme
• Midnight Blue - Deep blue professional theme
• Forest Canopy - Natural green theme
• Rosewood Elegance - Elegant pink theme
• Icy Mint - Cool cyan theme
• Golden Sand - Warm yellow theme
• Steel Grey - Modern grey theme
• Coral Reef - Vibrant coral theme

Input Field Integration

Easily integrate the datepicker with input fields:

<div class="relative">
  <input 
    type="text" 
    readonly
    [(ngModel)]="selectedDateString"
    (click)="showCalendar = true"
    placeholder="Select a date"
    class="form-control">
    
  <div *ngIf="showCalendar" class="calendar-dropdown">
    <hijri-gregorian-datepicker
      [showConfirmButton]="false"
      [multiple]="false"
      [rangeSelection]="false"
      (onDaySelect)="onDateSelected($event)"
      [theme]="'Dark Mode'">
    </hijri-gregorian-datepicker>
  </div>
</div>

onDateSelected(date: any) {
  this.selectedDateString = date.gD; // Gregorian date
  this.showCalendar = false; // Auto-close calendar
}

Business Use Cases

Hotel Booking System

<hijri-gregorian-datepicker
  [rangeSelection]="true"
  [minDate]="todayDate"
  [disabledDates]="unavailableDates"
  [futureValidation]="false"
  [submitTextButton]="'Book Dates'"
  (onSubmit)="bookHotel($event)">
</hijri-gregorian-datepicker>

Age Verification

<hijri-gregorian-datepicker
  [maxDate]="eighteenYearsAgo"
  [futureValidation]="true"
  [submitTextButton]="'Confirm Age'"
  (onSubmit)="verifyAge($event)">
</hijri-gregorian-datepicker>

Future Event Scheduling

<hijri-gregorian-datepicker
  [pastDateValidation]="true"
  [futureValidation]="false"
  [pastDateValidationMessageEn]="'Please select a future date for the event!'"
  [pastDateValidationMessageAr]="'يرجى اختيار تاريخ مستقبلي للحدث!'"
  [submitTextButton]="'Schedule Event'"
  (onSubmit)="scheduleEvent($event)">
</hijri-gregorian-datepicker>

Project Timeline

<hijri-gregorian-datepicker
  [minDate]="projectStartDate"
  [maxDate]="projectEndDate"
  [disabledDates]="weekends"
  [rangeSelection]="true"
  (onSubmit)="setMilestone($event)">
</hijri-gregorian-datepicker>

@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 | | futureValidation | boolean | true | When true the user cannot choose any future dates, if false user can select future dates | | pastDateValidation | boolean | false | When true the user cannot choose any past dates, if false user can select past dates | | hideYearPicker | boolean | false | When true the year picker button will be hidden, if false year picker will be visible | | hideMonthPicker | boolean | false | When true the month picker button will be hidden, if false month picker will be visible | | disableDayPicker | boolean | false | When true the user cannot select days, if false days select will be enabled | | showNavigationArrows | boolean | true | When true the navigation arrows (previous/next month buttons) will be displayed, if false they will be hidden | | 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 | | enableAnimations | boolean | true | When true enables smooth animations for view transitions and element appearances, if false disables all animations | | mode | string | greg | Calendar mode, either umAlQura 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 | | 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 | | pastDateValidationMessageEn | string | Selected date cannot be in the past! | English past date validation message if pastDateValidation is set to true | | pastDateValidationMessageAr | string | التاريخ المحدد لا يمكن ان يكون في الماضي! | Arabic past date validation message if pastDateValidation 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 | | minDate | string | undefined | Minimum selectable date in 'dd/mm/yyyy' format. Dates before this will be disabled | | maxDate | string | undefined | Maximum selectable date in 'dd/mm/yyyy' format. Dates after this will be disabled | | disabledDates | string[] | [] | Array of specific dates to disable in 'dd/mm/yyyy' format (e.g., holidays, blackout dates) | | rangeSelection | boolean | false | When true enables date range selection mode. User clicks start date, then end date to select a range | | initialDate | string | undefined | Initial date to open calendar to in 'dd/mm/yyyy' format. Must be within minDate/maxDate range if specified | | styles | object | {} | Styles for the calendar look and feel | | theme | string | Dark Mode | Different skins and themes for the calendar('Dark Mode', '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 | | todaysDateTextColor | string | #fff | Color of "today's date" date section text | | confirmBtnTextColor | string | #fff | Color of "Confirm" button text | | disabledDayColor | string | #C0C0C0 | Color for disabled dates (with 50% opacity automatically applied) | | dayNameColor | string | #0d7f91 | Day names 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 | | sliderToggleBackground | string | #d1d5db | Background color of the calendar mode toggle slider when inactive | | rangeStartColor | string | secondaryColor | Background color for the start date in range selection mode | | rangeEndColor | string | secondaryColor | Background color for the end date in range selection mode | | rangeBetweenColor | string | secondaryColor | Background color for dates between start and end in range selection |

@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';

  constructor(private _dateUtils: DateUtilitiesService) {

  }

| 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