Angular Hijri Gregorian Date Time Picker

• 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 - 20+ projects.
• Ionic 3 - 4, 5, 6 + is supported, can be used in iOS and Android.
• Zero npm dependents package.
• 10 different themes and layouts already built in, you can also customize your own as well.
• NEW: Time picker with 12h/24h formats, Range selection, Beautiful custom selects, Bilingual typography

Preview

✨ What's New in v1.5.0

🎉 Major Features

• ⏰ Time Picker - Full time selection with 12-hour/24-hour format support
• 📅 Range Selection - Select date ranges with start and end dates
• 🎨 Beautiful Custom Selects - Modern dropdown menus with smooth animations and Remix Icons
• 🌐 Bilingual Typography - Custom Default-Regular font for consistent Arabic and English text
• 🎯 Initial Date Support - Pre-select dates/ranges when calendar loads (initialDate, initialRangeStart, initialRangeEnd)
• 🌍 Translatable Labels - Full i18n support including AM/PM labels (amLabel, pmLabel)

🚀 UI/UX Enhancements

• Redesigned year/month selectors with professional styling
• Enhanced RTL/LTR support with automatic font switching
• Improved accessibility with proper ARIA labels
• Smooth animations and transitions throughout
• Better mobile responsiveness

See full CHANGELOG

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.

Star it to inspire us to build the best component!

Features

• Can be used as a calendar or a datepicker with time selection.
• RTL and LTR support with bilingual typography using Default-Regular font
• 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.
• Customizable date display format (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, etc.)
• Very easy to customize with beautiful custom select dropdowns.
• Can select Single, Multiple dates, or Date Ranges.
• Time picker with 12-hour/24-hour format support.
• Translatable labels including AM/PM for 12-hour format.
• Initial date and initial range support for pre-selecting dates.
• Event listeners for all datepicker events.
• Can customize future and past years number.
• Responsive design for web and mobile.
• Modern UI with Remix Icons and smooth animations.
• 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-date-time-picker

Usage

Import HijriGregorianDatepickerModule in your app module or page module:

import { HijriGregorianDatepickerModule } from 'angular-hijri-gregorian-date-time-picker';

@NgModule({
  imports: [
    // ...
    HijriGregorianDatepickerModule
  ]
})

Option 1: DateTime Input Component (Recommended)

Use the hijri-gregorian-datetime-input component for a complete input field with dropdown calendar:

<hijri-gregorian-datetime-input
  [(ngModel)]="selectedDate"
  [mode]="'greg'"
  [locale]="'en'"
  [dir]="'ltr'"
  [enableTime]="true"
  [selectionMode]="'single'"
  [placeholder]="'Select date and time'"
  [dateFormat]="'DD/MM/YYYY'"
  [minDate]="minDate"
  [maxDate]="maxDate"
  [useMeridian]="true"
  [styles]="stylesConfig"
  (dateSelected)="onDateSelected($event)"
></hijri-gregorian-datetime-input>

Date Format Examples:

<!-- European format: 19/12/2024 -->
<hijri-gregorian-datetime-input dateFormat="DD/MM/YYYY"></hijri-gregorian-datetime-input>

<!-- US format: 12/19/2024 -->
<hijri-gregorian-datetime-input dateFormat="MM/DD/YYYY"></hijri-gregorian-datetime-input>

<!-- ISO format: 2024-12-19 -->
<hijri-gregorian-datetime-input dateFormat="YYYY-MM-DD"></hijri-gregorian-datetime-input>

<!-- Year first: 1446/12/19 (useful for Hijri dates) -->
<hijri-gregorian-datetime-input mode="ummAlQura" dateFormat="YYYY/MM/DD"></hijri-gregorian-datetime-input>

Features:

• ✅ Form integration (works with ngModel and formControlName)
• ✅ Click-outside to close
• ✅ Keyboard support (Escape to close, Enter to open)
• ✅ Automatic date/time formatting in input field
• ✅ Clear button
• ✅ Remembers calendar mode and selected dates between open/close
• ✅ Supports all calendar features (time picker, range selection, etc.)

Option 2: Calendar Component (Direct)

Use the hijri-gregorian-datepicker component directly for embedded calendars:

<hijri-gregorian-datepicker
  [canChangeMode]="true"
  [todaysDateSection]="true"
  [futureValidation]="true"
  [disableYearPicker]="false"
  [disableMonthPicker]="false"
  [disableDayPicker]="false"
  [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"
  [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) {
    }

🌍 Internationalization (i18n) Examples

Translatable AM/PM Labels

The component supports full translation of AM/PM labels for 12-hour format:

English (Default):

<hijri-gregorian-datetime-input
  [enableTime]="true"
  [useMeridian]="true"
  [amLabel]="'AM'"
  [pmLabel]="'PM'"
  [locale]="'en'"
  [dir]="'ltr'"
></hijri-gregorian-datetime-input>

Arabic:

<hijri-gregorian-datetime-input
  [enableTime]="true"
  [useMeridian]="true"
  [amLabel]="'ص'"
  [pmLabel]="'م'"
  [locale]="'ar'"
  [dir]="'rtl'"
  [todaysDateText]="'تاريخ اليوم'"
  [ummAlQuraDateText]="'التاريخ الهجري'"
></hijri-gregorian-datetime-input>

Custom Labels:

<hijri-gregorian-datetime-input
  [enableTime]="true"
  [useMeridian]="true"
  [amLabel]="'Morning'"
  [pmLabel]="'Evening'"
></hijri-gregorian-datetime-input>

With Calendar Component:

<hijri-gregorian-datepicker
  [enableTime]="true"
  [useMeridian]="true"
  [amLabel]="'صباحاً'"
  [pmLabel]="'مساءً'"
  [locale]="'ar'"
  [dir]="'rtl'"
></hijri-gregorian-datepicker>

@Inputs()

DateTime Input Component

| Property | Type | Default | Description | | ---------------------------------- | :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------- | | placeholder | string | Select date and time | Placeholder text for the input field | | dateFormat | string | DD/MM/YYYY | Display format for dates. Supported: DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD, YYYY-MM-DD, etc. | | disabled | boolean | false | When true the input is disabled | | enableTime | boolean | false | When true enables time picker in the dropdown calendar | | minDate | Date | null | Minimum selectable date | | maxDate | Date | null | Maximum selectable date | | initialDate | Date | null | Initial date to display when opening calendar | | mode | string | greg | Calendar mode, either ummAlQura or greg | | locale | string | en | The language, either ar or en | | dir | string | ltr | Layout direction, either ltr or rtl | | selectionMode | string | single | Date selection mode: single for single date, multiple for multiple dates, or range for date range | | useMeridian | boolean | false | When true uses 12-hour format with AM/PM, if false uses 24-hour format | | amLabel | string | AM | Label for AM in 12-hour format (translatable) | | pmLabel | string | PM | Label for PM in 12-hour format (translatable) | | styles | object | {} | Styles configuration object | | theme | string | '' | Theme name (overrides styles) |

DateTime Input Events:

• dateSelected - Emitted when date is selected
• dropdownOpened - Emitted when dropdown opens
• dropdownClosed - Emitted when dropdown closes

Calendar Component

| 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 | | 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 | | amLabel | string | AM | Label for AM in 12-hour format (translatable, e.g., 'ص' for Arabic) | | pmLabel | string | PM | Label for PM in 12-hour format (translatable, e.g., 'م' for Arabic) | | 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 | | selectionMode | string | single | Date selection mode: single for single date, multiple for multiple dates, or range for date range selection | | initialDate | Date | null | Initial date to be selected/highlighted when calendar opens (for single selection mode) | | initialRangeStart | Date | null | Initial start date for range selection (for range selection mode) | | initialRangeEnd | Date | null | Initial end date for range selection (for range selection mode) | | minDate | Date | null | Minimum selectable date - dates before this will be disabled | | maxDate | Date | null | Maximum selectable date - dates after this will be disabled | | useMeridian | boolean | true | When true the time picker uses 12-hour format with AM/PM, if false uses 24-hour format | | dateDisplayFormat | string | DD/MM/YYYY | Display format for dates in the calendar. Supported: DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD, YYYY-MM-DD, etc. | | 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 | | timePickerBgColor | string | #ffffff | Background color for time input fields | | timePickerTextColor | string | #333 | Text color for time display | | timePickerBorderColor | string | #ddd | Border color for time inputs | | timePickerArrowColor | string | #5b479c | Color for up/down arrow icons | | timePickerColonColor | string | #5b479c | Color for colon separator | | meridianBgColor | string | #ffffff | Background color for AM/PM buttons | | meridianTextColor | string | #666 | Text color for AM/PM buttons | | meridianActiveBgColor | string | rgb(0, 77, 97) | Background color for active AM/PM button | | meridianActiveTextColor | string | #ffffff | Text color for active AM/PM button |

@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