A comprehensive, standalone Angular library providing high-quality Gregorian, Jalali (Persian), and Hijri (Islamic) date pickers. It is built on top of Angular Material and Day.js, offering seamless integration, built-in holiday highlighting, and extensive customization options.

Live Demo

• Multiple Calendar Systems: Fully functional Gregorian, Jalali (Solar Hijri), and Hijri (Lunar) calendars.
• Three Standalone Components:
  • MultiDatepickerComponent: Standard input-based date picker.
  • MultiDateRangePickerComponent: Select start and end dates.
  • MultiCalendarComponent: Inline calendar view.
• Holiday Highlighting: Built-in official holidays for all three calendar systems.
• Customization: Configure start day of week, weekend days, custom holidays, and theming.
• Picker Modes: Support for standard date picking, month & year only, or year only.
• Angular Material Native: Built directly on MatDatepicker, ensuring complete compatibility with Material Design.
• Day.js Powered: Uses the lightweight and immutable Day.js library for all date manipulations.

Install the package via npm:

npm install ngx-mat-multi-date-picker

The library provides standalone components. Import the ones you need directly into your component imports:

import { Component } from "@angular/core";
import { MultiDatepickerComponent, MultiDateRangePickerComponent } from "ngx-mat-multi-date-picker";
import dayjs, { Dayjs } from "dayjs";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [MultiDatepickerComponent, MultiDateRangePickerComponent],
  template: `
    <!-- Simple Datepicker -->
    <ngx-multi-datepicker [(value)]="date" calendarType="jalali"></ngx-multi-datepicker>

    <!-- Range Picker -->
    <ngx-multi-date-range-picker [(start)]="start" [(end)]="end" calendarType="gregorian"></ngx-multi-date-range-picker>
  `,
})
export class AppComponent {
  date: Dayjs | null = dayjs();
  start: Dayjs | null = dayjs();
  end: Dayjs | null = dayjs().add(7, "day");
}

The primary component for selecting a single date.

Allows selection of a start and end date range.

(Supports strictly the same holiday and configuration inputs as the single datepicker)

An inline calendar component that is always visible.

(Supports all standard holiday and min/max inputs)

You can define your own rules for highlighting dates (currently supported for Gregorian custom rules via input).

// Define custom holidays (e.g. Company Retreat on Jan 15th and 20th)
myCustomHolidays: CustomHolidayRule[] = [
  { year: 2025, month: 1, days: [15, 20] }
];

<ngx-multi-datepicker [customGregorianHolidays]="myCustomHolidays"></ngx-multi-datepicker>

The library uses a custom MultiDateAdapter. Display formats are handled automatically based on the selected calendarType.

• Gregorian: YYYY/MM/DD
• Jalali: YYYY/MM/DD (Solar Hijri year/month)
• Hijri: YYYY/MM/DD (Lunar Hijri year/month)

The component uses Angular Material's standard theming system.

• Holidays: Marked with the .holiday-date CSS class (default: color: red).
• Weekends: You can style them if you pass weekendDays and add custom CSS to matching cells if needed, or rely on dateClass.

To override holiday colors globally:

.holiday-date .mat-calendar-body-cell-content {
  color: #ff4081 !important; /* Your custom color */
  font-weight: bold;
}

The library includes comprehensive lists of official holidays.

Jalali (Persian): Nowruz (1-4 Farvardin), Islamic Republic Day (12 Farvardin), Sizdah Bedar, 14 & 15 Khordad, 22 Bahman, 29 Esfand, etc.

Hijri (Islamic): Tasua, Ashura, Arbaeen, Prophet's Demise, Eid al-Fitr, Eid al-Adha, Eid al-Ghadir, and more.

Gregorian: New Year (Jan 1), Christmas (Dec 25).

MIT License.