Persian Datepicker Component for Angular 8+ | NgPersianDatepicker

NgPersianDatepicker is a very clean and highly customizable Persian date and time picker component for Angular 8+ applications.

persian datepicker npm, persian datepicker angular, ng2 jalali date picker, best persian datepicker, angular modern calendar datepicker

How to make use of it:


npm install ng-persian-datepicker --save
npm install [email protected]^0.9.1 --save
npm install @types/[email protected]^0.7.4 --save-dev

After installation, edit tsconfig.json:

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,

import unit:

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

  imports: [


<input type="text" #datepickerInput />

You can customize the data picker configuration:

<input type="text" #datepickerInput />

Complete config reference:

dateValuestring or numbervalue of date. default: ''‘1398-12-15 14:32:45’ or 1583406165000
dateInitValuebooleanif no dateValue provided use today as init value. default: truetrue
dateIsGregorianbooleanis dateValue gregorian?. default: falsefalse
dateFormatstringshamsi date format, check moment and moment-jalaali docs to see available formats. default: jYYYY-jMM-jDD HH:mm:ss‘jYYYY-jMM-jDD HH:mm:ss’
dateGregorianFormatstringgregorian date format, check moment and moment-jalaali docs to see available formats. default: YYYY-MM-DD HH:mm:ss‘YYYY-MM-DD HH:mm:ss’
dateMinnumbermin date that user can select (timestamp) . default: nullmoment(‘1396-11-01’, ‘jYYYY-jMM-jDD’).valueOf()
dateMaxnumbermax date that user can select (timestamp) . default: nullmoment(‘1398-11-01’, ‘jYYYY-jMM-jDD’).valueOf()
dateOnInitcallbackonInit date callback. default: () => {}(shamsiDate: string, gregorianDate: string, timestamp: number) => {}
dateOnSelectcallbackonSelect date callback. default: () => {}(shamsiDate: string, gregorianDate: string, timestamp: number) => {}
timeEnablebooleanif set it to true time picker will visible. default: truetrue
timeShowSecondbooleantime second visibility. default: truetrue
timeMeridianbooleanshow time in 12 hour format. default: falsefalse
uiThemestringdatepicker theme: ‘default’, ‘blue’, ‘gray’, ‘dark’, ‘black’. default: 'default'‘dark’
uiIsVisiblebooleanonly when this is true datepicker is visible. default: falsetrue
uiHideOnOutsideClickbooleanif set to true datepicker will hide on outside click. default: truetrue
uiHideAfterSelectDatebooleanhide datepicker after date select. default: truetrue
uiYearViewbooleanif set to true year view will enable. default: truetrue
uiMonthViewbooleanif set to true month view will enable. default: truetrue
uiAutoPositionbooleandatepicker absolute position (beta: not working as expected in every cases). default: falsetrue
uiPositionOffsetArraymodify datepicker uiAutoPosition. default: [0, 0][15, 10]
uiContainerWidthstringif uiAutoPosition is true you can set container width. default: ''‘200px’
uiInitViewModestringInitial view mode (‘year’, ‘month’, ‘day’). default: 'day'‘year’
uiTodayBtnEnablebooleanShow go to today btn or notfalse

Pretty Clean Persian Datepicker Component, Ng Persian Datepicker Plugin/Github

See Demo And Download

Official Website(Saeed-Pooyanfar): Click Here

This superior jQuery/javascript plugin is developed by Saeed-Pooyanfar. For extra advanced usage, please go to the official website.