Persian DatePicker for Angular

An Angular wrapper for the persian-datepicker-element web component, providing a beautiful Persian (Jalali) calendar with holiday support.

Features

✅ Easy to use Angular component
✅ Angular Signals support (Angular 17+)
✅ Reactive forms integration
✅ Persian (Jalali) calendar
✅ Holiday highlighting and customization
✅ Range picker mode
✅ Min/Max date restrictions
✅ Disabled dates support
✅ Full TypeScript support
✅ Customizable theme via CSS variables

Installation

npm install ngx-persian-datepicker-element persian-datepicker-element
# or
yarn add ngx-persian-datepicker-element persian-datepicker-element

Usage

For standalone components (recommended):

import { NgxPersianDatepickerComponent } from 'ngx-persian-datepicker-element';

@Component({
  // ...
  imports: [NgxPersianDatepickerComponent]
  // ...
})
export class YourStandaloneComponent { }

Basic Usage

<ngx-persian-datepicker-element 
  placeholder="انتخاب تاریخ" 
  format="YYYY/MM/DD" 
  (dateChange)="onDateChange($event)">
</ngx-persian-datepicker-element>

With Reactive Forms

<form [formGroup]="myForm">
  <ngx-persian-datepicker-element formControlName="date"></ngx-persian-datepicker-element>
</form>

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      date: [null]
    });
  }
}

Range Picker Example

<ngx-persian-datepicker-element 
  [rangeMode]="true"
  [rangeStart]="[1402, 1, 1]"
  [rangeEnd]="[1402, 1, 15]"
  (dateChange)="onRangeChange($event)">
</ngx-persian-datepicker-element>

With Holiday Types

<ngx-persian-datepicker-element 
  [showEvents]="true" 
  [eventTypes]="['Iran', 'Religious']"
  (dateChange)="onDateChange($event)">
</ngx-persian-datepicker-element>

API

Input Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | placeholder | string | '' | Placeholder text for the input field | | format | string | 'YYYY/MM/DD' | Date format pattern | | showEvents | boolean | true | Whether to show holidays in the calendar | | eventTypes | string \| string[] | - | Types of holidays to display | | rtl | boolean | true | Right-to-left layout | | minDate | [number, number, number] | - | Minimum selectable date [year, month, day] | | maxDate | [number, number, number] | - | Maximum selectable date [year, month, day] | | disabledDates | string \| Function | - | Dates to disable (string pattern or function) | | rangeMode | boolean | false | Enable range selection mode | | rangeStart | [number, number, number] | - | Start date for range selection | | rangeEnd | [number, number, number] | - | End date for range selection | | defaultDate | [number, number, number] | - | Initial date to display |

Output Events

| Event | Type | Description | |-------|------|-------------| | dateChange | EventEmitter<DateChangeEvent> | Emitted when a date is selected |

DateChangeEvent Interface

interface DateChangeEvent {
  jalali: [number, number, number]; // [year, month, day]
  gregorian: [number, number, number]; // [year, month, day]
  isHoliday: boolean;
  events?: any[];
  range?: {
    start: [number, number, number];
    end: [number, number, number];
  };
}

Theme Customization

You can customize the appearance using CSS variables:

ngx-persian-datepicker-element {
  --jdp-primary: #0891b2;
  --jdp-primary-hover: #0e7490;
  --jdp-primary-foreground: #ffffff;
  --jdp-background: #ffffff;
  --jdp-foreground: #1e293b;
  --jdp-border: #e2e8f0;
  --jdp-border-radius: 0.5rem;
  --jdp-font-family: system-ui;
  --jdp-font-size: 14px;
  --jdp-nav-button-size: 38px;
  --jdp-day-cell-size: 36px;
  --jdp-holiday-color: #ef4444;
  --jdp-holiday-bg: #fee2e2;
}

License

MIT

کامپوننت تقویم شمسی برای Angular

یک wrapper برای کامپوننت وب تقویم شمسی در Angular، با پشتیبانی از تقویم جلالی و نمایش تعطیلات.

ویژگی‌ها

✅ کامپوننت Angular ساده و کاربردی
✅ پشتیبانی از Angular Signals (نسخه ۱۷+)
✅ یکپارچه‌سازی با Reactive Forms
✅ تقویم شمسی (جلالی)
✅ نمایش و شخصی‌سازی تعطیلات
✅ حالت انتخاب بازه
✅ محدودیت حداقل/حداکثر تاریخ
✅ پشتیبانی از تاریخ‌های غیرفعال
✅ پشتیبانی کامل از TypeScript
✅ قابلیت شخصی‌سازی ظاهر با متغیرهای CSS

نصب

npm install ngx-persian-datepicker-element persian-datepicker-element
# یا
yarn add ngx-persian-datepicker-element persian-datepicker-element

نحوه استفاده

برای کامپوننت‌های standalone (توصیه شده):

import { NgxPersianDatepickerComponent } from 'ngx-persian-datepicker-element';

@Component({
  // ...
  imports: [NgxPersianDatepickerComponent]
  // ...
})
export class YourStandaloneComponent { }

استفاده پایه

<ngx-persian-datepicker-element 
  placeholder="انتخاب تاریخ" 
  format="YYYY/MM/DD" 
  (dateChange)="onDateChange($event)">
</ngx-persian-datepicker-element>

استفاده با Reactive Forms

<form [formGroup]="myForm">
  <ngx-persian-datepicker-element formControlName="date"></ngx-persian-datepicker-element>
</form>

مثال انتخاب بازه

<ngx-persian-datepicker-element 
  [rangeMode]="true"
  [rangeStart]="[1402, 1, 1]"
  [rangeEnd]="[1402, 1, 15]"
  (dateChange)="onRangeChange($event)">
</ngx-persian-datepicker-element>

ورودی‌ها

| ورودی | نوع | پیش‌فرض | توضیحات | |-------|-----|---------|----------| | placeholder | string | '' | متن پیش‌فرض ورودی | | format | string | 'YYYY/MM/DD' | الگوی نمایش تاریخ | | showEvents | boolean | true | نمایش تعطیلات | | eventTypes | string \| string[] | - | انواع تعطیلات برای نمایش | | rtl | boolean | true | چیدمان راست به چپ | | minDate | [number, number, number] | - | حداقل تاریخ قابل انتخاب [سال، ماه، روز] | | maxDate | [number, number, number] | - | حداکثر تاریخ قابل انتخاب [سال، ماه، روز] | | disabledDates | string \| Function | - | تاریخ‌های غیرفعال (الگو یا تابع) | | rangeMode | boolean | false | فعال‌سازی حالت انتخاب بازه | | rangeStart | [number, number, number] | - | تاریخ شروع بازه | | rangeEnd | [number, number, number] | - | تاریخ پایان بازه | | defaultDate | [number, number, number] | - | تاریخ اولیه برای نمایش |

خروجی‌ها

| رویداد | نوع | توضیحات | |--------|-----|----------| | dateChange | EventEmitter<DateChangeEvent> | هنگام انتخاب تاریخ فراخوانی می‌شود |

شخصی‌سازی ظاهر

می‌توانید با استفاده از متغیرهای CSS، ظاهر تقویم را شخصی‌سازی کنید:

ngx-persian-datepicker-element {
  --jdp-primary: #0891b2;
  --jdp-primary-hover: #0e7490;
  --jdp-primary-foreground: #ffffff;
  --jdp-background: #ffffff;
  --jdp-foreground: #1e293b;
  --jdp-border: #e2e8f0;
  --jdp-border-radius: 0.5rem;
  --jdp-font-family: system-ui;
  --jdp-font-size: 14px;
  --jdp-nav-button-size: 38px;
  --jdp-day-cell-size: 36px;
  --jdp-holiday-color: #ef4444;
  --jdp-holiday-bg: #fee2e2;
}