NgPersianDatepicker

Persian datepicker for angular 12+
Online demo

Install

npm install ng-persian-datepicker
npm install jalali-ts@^2.0.4

Setup

Import modules:

...
import { NgPersianDatepickerModule } from 'ng-persian-datepicker';
import { ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
  imports: [
    ...
      NgPersianDatepickerModule,
      ReactiveFormsModule,
    ...
  ],
  ...
})
...

Implement

import { FormControl } from '@angular/forms';

@Component(...)
class DateComponent {

  dateValue = new FormControl();

}

<ng-persian-datepicker>
  <input type="text" [formControl]="dateValue" />
</ng-persian-datepicker>

That's it! this was a minimal setup ...

Config [input]

You can customize datepicker config:

<ng-persian-datepicker [uiTheme]="darkTheme" ...>
  ...
</ng-persian-datepicker>

Complete config reference:

Event (output)

Complete events reference:

jalali-ts

Since ng-persian-datepicker@^6.x.x using jalali-ts instead of moment-jalaali, there are some limitations for parsing input date + output format
Please check jalali-ts for more information

IActiveDate

It doesn't matter that you have timestamp or gregorian date as initial value,
The value of dateValue: FormControl is a shamsi (jalai) date string!
But what if you want timestamp or gregorian date of selected date?
First take a look at IActiveDate
As you saw, IActiveDate includes shamsi date, gregorian date and timestamp.
The lib has 2 events of type IActiveDate:

• dateOnInit
• dateOnSelect

So, if you need to create Date object of selected date:

import { IActiveDate } from 'ng-persian-datepicker';

@Component(...)
class DateComponent {
  
  onSelect(event: IActiveDate): void {
    const viaTimestampValue = new Date(event.timestamp);
    const viaGregorianDate = new Date(event.gregorian);
  }
  
}

<ng-persian-datepicker (dateOnSelect)="onSelect($event)" ...>
  ...
</ng-persian-datepicker>

Custom theme

Every app has its unique theme, static themes maybe are easy to use but hard to customize!
With custom theme feature you can create your custom theme base on your app theme.
To create a custom theme you need a set of colors for every part of datepicker component.
Example:

import { IDatepickerTheme } from 'ng-persian-datepicker';

const customTheme: Partial<IDatepickerTheme> = {
  selectedBackground: '#D68E3A',
  selectedText: '#FFFFFF',
};

<ng-persian-datepicker [uiTheme]="customTheme" ...>
  ...
</ng-persian-datepicker>

Checkout IDatepickerTheme interface to see all available props
And darkTheme for full example

Note
Your theme will merge with defaultTheme,
So if you don't provide all colors, the defaultTheme value will use for the missing parts

Offline demo

you can download a release and see ng-persian-datepicker demo:

cd /to/ng-persian-datepicker/dir
npm install
npm run start

open http://localhost:4200 in your browser