{"id":21526495,"url":"https://github.com/saeeddev94/ng-persian-datepicker","last_synced_at":"2025-10-25T04:46:10.526Z","repository":{"id":37549839,"uuid":"220038479","full_name":"SaeedDev94/ng-persian-datepicker","owner":"SaeedDev94","description":"Persian datepicker for angular 19+","archived":false,"fork":false,"pushed_at":"2025-01-22T04:41:03.000Z","size":4164,"stargazers_count":99,"open_issues_count":6,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-05T20:15:52.335Z","etag":null,"topics":["angular","datepicker","jalaali","shamsi","timepicker","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SaeedDev94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-11-06T16:13:48.000Z","updated_at":"2025-08-12T14:14:32.000Z","dependencies_parsed_at":"2023-02-08T06:16:34.014Z","dependency_job_id":"527d0437-5a3c-439a-a048-d04d904f03bc","html_url":"https://github.com/SaeedDev94/ng-persian-datepicker","commit_stats":null,"previous_names":["saeeddev94/ng-persian-datepicker","saeed-pooyanfar/ng-persian-datepicker"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/SaeedDev94/ng-persian-datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedDev94%2Fng-persian-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedDev94%2Fng-persian-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedDev94%2Fng-persian-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedDev94%2Fng-persian-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SaeedDev94","download_url":"https://codeload.github.com/SaeedDev94/ng-persian-datepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedDev94%2Fng-persian-datepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280906488,"owners_count":26411412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","datepicker","jalaali","shamsi","timepicker","typescript"],"created_at":"2024-11-24T01:45:19.042Z","updated_at":"2025-10-25T04:46:10.296Z","avatar_url":"https://github.com/SaeedDev94.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgPersianDatepicker\n\nPersian datepicker for angular 19+  \n**[Online demo](https://saeeddev94.github.io/ng-persian-datepicker/)**\n\n# Install\n\n```\nnpm install ng-persian-datepicker\nnpm install jalali-ts@^8.0.0\n```\n\n# Setup\n\nImport modules:\n\n```typescript\n...\nimport { NgPersianDatepickerModule } from 'ng-persian-datepicker';\nimport { ReactiveFormsModule } from '@angular/forms';\n...\n\n@NgModule({\n  imports: [\n    ...\n      NgPersianDatepickerModule,\n      ReactiveFormsModule,\n    ...\n  ],\n  ...\n})\n...\n```\n\n# Implement\n\n```typescript\nimport { FormControl } from '@angular/forms';\n\n@Component(...)\nclass DateComponent {\n\n  dateValue = new FormControl();\n\n}\n```\n\n```html\n\u003cng-persian-datepicker\u003e\n  \u003cinput type=\"text\" [formControl]=\"dateValue\" /\u003e\n\u003c/ng-persian-datepicker\u003e\n```\n\nThat's it! this was a minimal setup ...\n\n# Config [input]\n\nYou can customize datepicker config:\n\n```html\n\u003cng-persian-datepicker [uiTheme]=\"darkTheme\" ...\u003e\n  ...\n\u003c/ng-persian-datepicker\u003e\n```\n\nComplete config reference:\n\n| Key                   | Type             | Description                                                                                 | Example                                |\n|-----------------------|------------------|---------------------------------------------------------------------------------------------|----------------------------------------|\n| calendarIsGregorian   | boolean          | set this to `true` if you want gregorian calendar. default: `false`                         | true                                   |\n| dateValue             | FormControl      | use this if you don't need a html input                                                     | dateValue: FormControl                 |           \n| dateInitValue         | boolean          | if no dateValue provided use today as init value. default: `true`                           | true                                   |\n| dateIsGregorian       | boolean          | is dateValue gregorian?. default: `false`                                                   | false                                  |\n| dateFormat            | string           | shamsi date format, check jalali-ts docs to see available formats. default: `YYYY/MM/DD`    | 'YYYY-MM-DD HH:mm:ss'                  |\n| dateGregorianFormat   | string           | gregorian date format, check jalali-ts docs to see available formats. default: `YYYY-MM-DD` | 'YYYY-MM-DD HH:mm:ss'                  |\n| dateMin               | number           | min date that user can select (timestamp) . default: `null`                                 | Jalali.parse('1396-11-01').valueOf()   |\n| dateMax               | number           | max date that user can select (timestamp) . default: `null`                                 | Jalali.parse('1398-11-01').valueOf()   |\n| timeEnable            | boolean          | if set it to true time picker will visible. default: `false`                                | true                                   |\n| timeShowSecond        | boolean          | time second visibility. default: `false`                                                    | true                                   |\n| timeMeridian          | boolean          | show time in 12 hour format. default: `false`                                               | false                                  |\n| uiTheme               | IDatepickerTheme | datepicker theme, default: `defaultTheme: IDatepickerTheme`                                 | darkTheme: IDatepickerTheme            |\n| uiIsVisible           | boolean          | only when this is true datepicker is visible. default: `false`                              | true                                   |\n| uiHideOnOutsideClick  | boolean          | if set to true datepicker will hide on outside click. default: `true`                       | true                                   |\n| uiHideAfterSelectDate | boolean          | hide datepicker after date select. default: `true`                                          | true                                   |\n| uiYearView            | boolean          | if set to true year view will enable. default: `true`                                       | true                                   |\n| uiMonthView           | boolean          | if set to true month view will enable. default: `true`                                      | true                                   |\n| uiInitViewMode        | string           | Initial view mode ('year', 'month', 'day'). default: `'day'`                                | 'year'                                 |\n| uiTodayBtnEnable      | boolean          | Show go to today btn or not. default: `true`                                                | false                                  |\n\n# Event (output)\n\nComplete events reference:\n\n| Key               | Type                | Description                           | Example                                       |\n|-------------------|---------------------|---------------------------------------|-----------------------------------------------|\n| dateOnInit        | $event: IActiveDate | Fire event on setting init date value | (dateOnInit)=\"onInit($event)\"                 |\n| dateOnSelect      | $event: IActiveDate | Fire event on date select             | (dateOnSelect)=\"onSelect($event)\"             |\n| uiIsVisibleChange | $event: boolean     | Fire event on visibility change       | (uiIsVisibleChange)=\"onVisibleChange($event)\" |\n\n# jalali-ts\n\nSince `ng-persian-datepicker@^6.x.x` using `jalali-ts` instead of `moment-jalaali`, there are some limitations for parsing input date + output format  \nPlease check **[jalali-ts](https://github.com/Saeed-Pooyanfar/jalali-ts)** for more information\n\n# IActiveDate\n\nIt doesn't matter that you have timestamp or gregorian date as initial value,  \nThe value of `dateValue: FormControl` is a shamsi (jalai) date string!  \nBut what if you want timestamp or gregorian date of selected date?  \nFirst take a look at **[IActiveDate](https://github.com/Saeed-Pooyanfar/ng-persian-datepicker/blob/master/projects/ng-persian-datepicker/src/lib/interface/IActiveDate.ts)**  \nAs you saw, `IActiveDate` includes shamsi date, gregorian date and timestamp.  \nThe lib has 2 events of type `IActiveDate`:\n\n- dateOnInit\n- dateOnSelect\n\nSo, if you need to create `Date` object of selected date:  \n\n```typescript\nimport { IActiveDate } from 'ng-persian-datepicker';\n\n@Component(...)\nclass DateComponent {\n  \n  onSelect(event: IActiveDate): void {\n    const viaTimestampValue = new Date(event.timestamp);\n    const viaGregorianDate = new Date(event.gregorian);\n  }\n  \n}\n```\n\n```html\n\u003cng-persian-datepicker (dateOnSelect)=\"onSelect($event)\" ...\u003e\n  ...\n\u003c/ng-persian-datepicker\u003e\n```\n\n# Custom theme\n\nEvery app has its unique theme, static themes maybe are easy to use but hard to customize!  \nWith custom theme feature you can create your custom theme base on your app theme.  \nTo create a custom theme you need a set of colors for every part of datepicker component.  \nExample:\n\n```typescript\nimport { IDatepickerTheme } from 'ng-persian-datepicker';\n\nconst customTheme: Partial\u003cIDatepickerTheme\u003e = {\n  selectedBackground: '#D68E3A',\n  selectedText: '#FFFFFF',\n};\n```\n\n```html\n\u003cng-persian-datepicker [uiTheme]=\"customTheme\" ...\u003e\n  ...\n\u003c/ng-persian-datepicker\u003e\n```\n\nCheckout **[IDatepickerTheme](https://github.com/Saeed-Pooyanfar/ng-persian-datepicker/blob/master/projects/ng-persian-datepicker/src/lib/interface/IDatepickerTheme.ts)** interface to see all available props  \nAnd **[darkTheme](https://github.com/Saeed-Pooyanfar/ng-persian-datepicker/blob/master/src/app/demo/datepicker-theme/dark.theme.ts)** for full example\n\n\u003e **Note**  \n\u003e Your theme will merge with defaultTheme,  \n\u003e So if you don't provide all colors, the defaultTheme value will use for the missing parts\n\n# Offline demo\n\nyou can download a release and see ng-persian-datepicker demo:\n\n```\ncd /to/ng-persian-datepicker/dir\nnpm install\nnpm run start\n```\n\nopen `http://localhost:4200` in your browser\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaeeddev94%2Fng-persian-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaeeddev94%2Fng-persian-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaeeddev94%2Fng-persian-datepicker/lists"}