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:

Installations:

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';
...

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

Implement:

<input type="text" #datepickerInput />
<ng-persian-datepicker
  [input]="datepickerInput"></ng-persian-datepicker>

You can customize the data picker configuration:

<input type="text" #datepickerInput />
<ng-persian-datepicker
  [input]="datepickerInput"
  [uiTheme]="'dark'"
  [timeMeridian]="true"></ng-persian-datepicker>

Complete config reference:

KeyTypeDescriptionExample
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.

Share