HijriGregorianDatePicker

This library was generated with Angular CLI version 17.3.0.

An Angular standalone date picker that supports both Gregorian and Hijri calendars.
Available as an installable package and works with template-driven or reactive forms seamlessly.

✨ Features

• Dual calendar support (Gregorian & Hijri)
• Emits selected date in both formats
• Minimum & maximum date restrictions
• Works in standalone usage or with reactive forms
• readOnly input for non-editable mode
• isHijri input to start in Hijri mode
• returnedValue input to decide which calendar value updates the form

📦 Installation

Install dependencies:

npm install hijri-gregorian @ng-bootstrap/ng-bootstrap@16 bootstrap@5

Include Bootstrap styles

You can include Bootstrap in two ways:

Option 1 – SCSS (recommended if you want to customize variables)

/* src/styles.scss */
@import "bootstrap/scss/bootstrap";

Angular automatically resolves node_modules paths, so you don’t need ../node_modules/....

Option 2 – CSS (simpler, no SCSS customization)

In angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Import in your standalone component or module

import { HijriGregorianDatePicker } from 'hijri-gregorian';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, HijriGregorianDatePicker],
  templateUrl: './app.component.html',
})
export class AppComponent {}

🔹 1. Standalone Usage

<div class="container mt-5">
  <div class="row">
    <div class="col-md-5">
      <hijri-gregorian
        (dateSelected)="onDatePicked($event)"
        [currentDate]="currentDate"
        [readOnly]="true"
        [isHijri]="true"
        [minDate]="minDate"
        [maxDate]="maxDate"
      />
    </div>

    <div class="col-md-3">
      <span>{{date?.gregorian}}</span><br>
      <span>{{date?.hijri}}</span>
    </div>
  </div>
</div>

Inputs

| Input | Type | Default | Description | | ------------- | --------- | ------- | ----------------------------------------------------- | | currentDate | string | — | Initial date (Format: YYYY-M-D, e.g., 2025-01-01) | | minDate | string | — | Minimum selectable date (Format: YYYY-MM-DD) | | maxDate | string | — | Maximum selectable date (Format: YYYY-MM-DD) | | readOnly | boolean | false | Makes input non-editable if true | | isHijri | boolean | false | Starts calendar in Hijri mode if true | | returnedValue | string | gregorian | Which date value updates the form ('gregorian' or 'hijri') |

Outputs

| Event | Payload | Description | | -------------- | ----------------------------------------------------- | -------------------------------------------------------- | | dateSelected | { gregorian: string, hijri: string, value: string } | Emits selected date in both Gregorian and Hijri formats. |

🔹 2. Reactive Forms Usage

<form class="container mt-5" [formGroup]="form" (ngSubmit)="submit()">
  <div class="row">
    <div class="col-md-5">
      <hijri-gregorian
        formControlName="date"
        returnedValue="gregorian"
      />
    </div>
  </div>

  <button type="submit">Submit</button>
</form>

Component TS

this.form = this.fb.group({
  // With min/max date and disabled
  date: [{ value: '2025-09-21', minDate: '2025-09-19', maxDate: '2025-09-25', disabled: false }, [Validators.required]],

  // Or simple date without min/max or disabled
  // date: ['2025-09-21', [Validators.required]]
});

Notes

• returnedValue determines which date is written to the form ('gregorian' or 'hijri').
• Validators like Validators.required can be used.
• minDate and maxDate can be passed via form control object or as component inputs.
• readOnly will make the input non-editable even in reactive forms.
• isHijri starts the calendar in Hijri mode.

Example dateSelected payload

{
  "gregorian": "2025-09-21",
  "hijri": "1446-03-10",
  "value": "2025-09-21"
}

Customization

• Style using CSS.
• Adjust date formats or localization as needed.

Known Issues

• Ensure hijri-converter is installed to avoid conversion errors.
• Browser support depends on Angular and ng-bootstrap.