Angular-hijri-gregorian-datepicker NPM

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