{"_id":"@aligorji/ng2-jalali-date-picker","_rev":"4-68d6f2e6c1b6b05d6d169ded8055277f","time":{"created":"2022-01-15T07:57:59.850Z","2.4.3":"2022-01-15T07:15:53.949Z","modified":"2022-04-04T13:24:45.335Z","2.4.4":"2022-01-15T07:58:00.119Z"},"name":"@aligorji/ng2-jalali-date-picker","dist-tags":{"latest":"2.4.4"},"versions":{"2.4.4":{"name":"@aligorji/ng2-jalali-date-picker","author":{"name":"Mojtaba Zarei"},"version":"2.4.4","license":"MIT","main":"bundles/ng2-jalali-date-picker.umd.js","scripts":{"ng":"ng","start":"ng serve -o","build":"ng build","test":"ng test","coverage":"export CODACY_PROJECT_TOKEN=a92cd223e71b45ff99f24f7350ea89c3 ; ng test --watch=false --code-coverage && cat ./coverage/lcov.info | ./node_modules/.bin/codacy-coverage","lint":"ng lint","e2e":"ng e2e","e2e:headless":"ng e2e -- headless","build:demo":"rm -rf demo/*.js && rm -rf demo/*.css && ng build --prod --aot=false --bh /jalali-angular-datepicker/ && npm run build:index && cp dist/* demo","build:index":"cd build-helpers && node index-maker.js","build:prod":"ng-packagr -p package.json && copy -R screenshots bin","release":"npm run build:prod && npm publish bin","pack":"cd bin && npm pack"},"repository":{"type":"git","url":"git+https://github.com/fingerpich/angular-datepicker.git"},"private":false,"keywords":["angular","jalali","shamsi","khorshidi","persian","date","picker","datepicker","datepicker farsi","typescript","ts","farsi"],"dependencies":{"jalali-moment":"^3.3.10"},"devDependencies":{"@angular/cli":"^1.6.1","@angular/common":"^5.1.1","@angular/compiler":"^5.1.1","@angular/compiler-cli":"^5.2.11","@angular/core":"^5.1.1","@angular/forms":"^5.1.1","@angular/platform-browser":"^5.1.1","@angular/platform-browser-dynamic":"^5.1.1","@angular/router":"^5.1.1","@types/google.analytics":"0.0.33","@types/jasmine":"https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.38.tgz","@types/node":"https://registry.npmjs.org/@types/node/-/node-6.0.94.tgz","classlist.js":"^1.1.20150312","codelyzer":"^4.0.2","core-js":"^2.4.1","jasmine-core":"~2.5.2","jasmine-spec-reporter":"~3.2.0","karma":"~1.4.1","karma-chrome-launcher":"~2.0.0","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.3.0","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","less":"^2.7.2","ncp":"^2.0.0","ng-packagr":"^1.6.0","protractor":"^5.2.0","rimraf":"^2.6.1","rxjs":"^5.1.0","ts-node":"^4.0.2","tslint":"~5.8.0","typescript":"~2.4.2","uglify-js":"^2.8.12","web-animations-js":"^2.2.5","zone.js":"^0.8.4"},"angularCompilerOptions":{"skipTemplateCodegen":true,"strictMetadataEmit":true},"module":"@aligorji/ng2-jalali-date-picker.es5.js","es2015":"@aligorji/ng2-jalali-date-picker.js","typings":"ng2-jalali-date-picker.d.ts","metadata":"ng2-jalali-date-picker.metadata.json","description":"This is a configurable jalali (persian, khorshidi, shamsi) date-picker build for Angular 2 applications and uses [jalali-moment](https://github.com/fingerpich/moment-jalaali) as its dependency.\r [DEMO](https://fingerpich.github.io/jalali-angular-datepicke","bugs":{"url":"https://github.com/fingerpich/angular-datepicker/issues"},"homepage":"https://github.com/fingerpich/angular-datepicker#readme","_id":"@aligorji/ng2-jalali-date-picker@2.4.4","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ODNQwpj1kLlB4AenVNtGlRzAsYRuRrHuOAM41BuhODfh04vzC3lstLaw7IFIWnVrL/MQf3q4s0cxhJ0C1kAzqw==","shasum":"3e1df877833e0122ea29fbb4892bdbbec631c0b6","tarball":"https://registry.npmjs.org/@aligorji/ng2-jalali-date-picker/-/ng2-jalali-date-picker-2.4.4.tgz","fileCount":51,"unpackedSize":1752287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4n6ICRA9TVsSAnZWagAABGoP/2skHeV+mKl+5j2q02d+\ns/60FsBGwcVL+1IBlibTDT13AWcZria+zAGwrDgkwBNL6fkLXB3meM2dBGvE\nUrRrp2VTW4v00TvqBVHPIHnoY4R7xurKivEzPSOyFk6MlvQOvHlxSDnKsoe2\n3onwrMAba0mXfrUv1qYQRC1yQgJH1Y/7srucvv/A/JmY3Xc4lTz49L9Dbgn5\nD46/5q0SBMHrnp9NprYmuXWW5mzJfSh1q2bjEwGlJiNYaZYLQFmKS+n90uUY\ntM4LtxMNBjZUlE5m7YV4pf73Bx9cINyugHjVr3oBbyJsxw49Q5uvq6zybhlw\nqp+tiajwsKPVPSltm3Qwgq/IpPp3madbaUQdGhJsSp/HHuxmdlf+0s0DbKei\nBoVQRR56sw7jCFK6aSeCEMz9Qz8QMp/CMvTdZHrcsOYSlQtAM7uJPwTV8MLS\nTOCeyk1cFGCoBnxUCpkQXKeunDYYMNm2moipDbFa5TQOhHzBBUoQDt/pXGoD\nomE0hDbCdtqnvl2dZCAaYLiyw8MWxc87OO4JUE3LqoYMNZr53k0t0I0QCbR5\nxblJohKB/vAaqzgcCJbySYGVD/EBik3TvlbDdng1FU6eQvR1+N5idE0j3S87\n99X8wu5AC/prUURclYAX+nKkcUxXY1P1x9SwbCehWYCDu85dLjSgkh1V/qKG\nvLCQ\r\n=a563\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj9hhTHGMKWeCoE2NwLwxr7LIZeY+oVTbQp/T/D0loQwIgcWsH+7TaqJpb2MAsJl6FFbCRXXJAB775iUBZ798KV5A="}]},"_npmUser":{"name":"a.gorji","email":"aligorji68@gmail.com"},"directories":{},"maintainers":[{"name":"a.gorji","email":"aligorji68@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng2-jalali-date-picker_2.4.4_1642233479911_0.6598260217612284"},"_hasShrinkwrap":false}},"maintainers":[{"name":"a.gorji","email":"aligorji68@gmail.com"}],"description":"This is a configurable jalali (persian, khorshidi, shamsi) date-picker build for Angular 2 applications and uses [jalali-moment](https://github.com/fingerpich/moment-jalaali) as its dependency.\r [DEMO](https://fingerpich.github.io/jalali-angular-datepicke","homepage":"https://github.com/fingerpich/angular-datepicker#readme","keywords":["angular","jalali","shamsi","khorshidi","persian","date","picker","datepicker","datepicker farsi","typescript","ts","farsi"],"repository":{"type":"git","url":"git+https://github.com/fingerpich/angular-datepicker.git"},"author":{"name":"Mojtaba Zarei"},"bugs":{"url":"https://github.com/fingerpich/angular-datepicker/issues"},"license":"MIT","readme":"# Angular Jalali Date Picker\r\nThis is a configurable jalali (persian, khorshidi, shamsi) date-picker build for Angular 2 applications and uses [jalali-moment](https://github.com/fingerpich/moment-jalaali) as its dependency.\r\n[DEMO](https://fingerpich.github.io/jalali-angular-datepicker/)\r\n\r\nRead this in other languages: [فارسی](./README.fa.md)\r\n\r\n[](https://travis-ci.org/fingerpich/jalali-angular-datepicker) \r\n[](https://badge.fury.io/js/ng2-jalali-date-picker)\r\n[](http://packagequality.com/#?package=ng2-jalali-date-picker)\r\n[](https://david-dm.org/fingerpich/jalali-angular-datepicker)\r\n[](https://david-dm.org/fingerpich/jalali-angular-datepicker?type=dev)\r\n[](https://www.codacy.com/app/zarei-bs/jalali-angular-datepicker?utm_source=github.com&utm_medium=referral&utm_content=fingerpich/jalali-angular-datepicker&utm_campaign=Badge_Grade)\r\n[](https://www.codacy.com/app/zarei-bs/jalali-angular-datepicker?utm_source=github.com&utm_medium=referral&utm_content=fingerpich/jalali-angular-datepicker&utm_campaign=Badge_Coverage)\r\n\r\n## Screenshots\r\n\r\n\r\n\r\n## Installation:\r\n1. Download from npm:\r\n`npm install ng2-jalali-date-picker --save` \r\n2. import the `DpDatePickerModule` module in typescript (.ts) or es6 files like below: \r\n `import {DpDatePickerModule} from 'ng2-jalali-date-picker';` \r\n3. Add `DpDatePickerModule` to your module imports: \r\n```ts\r\n @NgModule({\r\n ...\r\n imports: [\r\n ...\r\n DpDatePickerModule\r\n ]\r\n })\r\n```\r\n\r\n## How to use\r\n\r\n```html\r\n \r\n \r\n```\r\n\r\n```ts\r\n dateObject = \"\";\r\n \r\n //OR if you have initial value you could use following code\r\n import * as moment from 'jalali-moment';\r\n dateObject = moment('1395-11-22','jYYYY,jMM,jDD');\r\n```\r\n[Demo](https://plnkr.co/XJSWtt)\r\n\r\n#### How to use the output as a jalali (shamsi) date\r\n ```ts\r\nimport * as moment from 'jalali-moment';\r\ndateObject.format('jYYYY/jMM/jD)'\r\n```\r\nread [jalali-moment](https://github.com/fingerpich/jalali-moment)\r\n\r\n#### How to use it with system.js\r\n[this Demo](https://plnkr.co/XJSWtt) is using system.js. \r\n\r\n\r\n### Attributes (Input):\r\nall attributes in the following table could be used as \r\n```html\r\n// a future selector\r\n\r\n```\r\n| Name | Type | Default | Applies To | Description |\r\n|----------------------|:-----------------------------------:|:------------------:|:-------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| dir | `rtl`|`ltr` | `ltr` | the type of the calender which will be displayed in the picker |\r\n| mode | `\"day\"\\|\"month\"\\|\"time\"\\|\"daytime\"` | `\"day\"` | All | The mode of the calender which will be displayed in the picker |\r\n| displayDate | `Moment\\|String` | current date | `day\\|month\\|daytime` | Indicates on what date to open the calendar on |\r\n| disabled | `Boolean` | `false` | All | If set to true the input would be disabled |\r\n| placeholder | `String` | `\"\"` | All | The date-picker input placeholder |\r\n| required | `Boolean` | `undefined` | All | This is a validation rule, if there won't be any selected date then the containing form will be invalid. |\r\n| minDate | `Moment\\|String` | `undefined` | `day\\|month\\|daytime` | This is a validation rule, if the selected date will be before `minDate` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| maxDate | `Moment\\|String` | `undefined` | `day\\|month\\|daytime` | This is a validation rule, if the selected date will be after `maxDate` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| minTime | `Moment\\|String` | `undefined` | `time` | This is a validation rule, if the selected date will be before `minTime` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| maxTime | `Moment\\|String` | `undefined` | `time` | This is a validation rule, if the selected date will be after `maxTime` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| theme | `String` | `\"\"` | All | Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo. |\r\n| config | `IDatePickerConfig` | See Below | All | Configuration object - see description below. |\r\n\r\n### Attributes (Output): \r\n\r\n| Name | Event Arguments | Applies To | Description |\r\n|----------------------|:-----------------------------------:|:-------------------------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| onChange | `CalendarValue` | All Pickers | This event will be emitted on every valid value change, if you want to receive every value (valid and invalid) please use the native `ngModelChange` output. |\r\n| open | `undefined` | All Pickers | This event will be emitted when picker is opened. |\r\n| close | `CalendarValue` | All Pickers | This event will be emitted when picker is closed. |\r\n| onGoToCurrent | void | All Pickers | This event will be emitted when click was made on go to current button. |\r\n| onLeftNav | void | All Pickers | This event will be emitted when click was made on left navigation button. |\r\n| onRightNav | void | All Pickers | This event will be emitted when click was made on right navigation button. |\r\n\r\n### Configuration: \r\nIn order to provide configurations to the date-picker you need to pass it to the `dp-date-picker` component: \r\n```html\r\n\r\n```\r\n```ts\r\ndatePickerConfig = {\r\n drops: 'up',\r\n format: 'YY/M/D'\r\n}\r\n```\r\nHere are the available configurations: \r\n\r\n| Name | Type | Default | Applies To | Description |\r\n|-----------------------------|:---------------------:|:-------------------------------------------------------------------------:|:-------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| appendTo | `String\\|HTMLElement` | `undefined` | All | The selector/element to which the calendar popup will append to (this is useful for `overflow: hidden` container issues). Please note that the `appendTo` element will be set with position `absolute` if it has position `static` (the default position). |\r\n| locale | `String` | [`moment.locale()`](https://momentjs.com/docs/#/i18n/getting-locale/) | All | Localisation of language (see in the demo all supported locales) |\r\n| disableKeypress | `Boolean` | `false` | All | Disables the possibility to change the date value by typing it - changing the date would be possible only from the picker |\r\n| format | `String` | `\"DD-MM-YYYY\"` | All | If ngModel provided as `String` the format is required, this format also will be used as the input format style. |\r\n| onOpenDelay | `Number` | `0` | All | The delay (in ms) between the date picker focusing and the date-picker popup apparel |\r\n| drops | `'up'\\|'down'` | `undefined` down if possible | All | Whether the picker appears below or above the input element. |\r\n| opens | `'right'\\|'left'` | `undefined` right if possible | All | Whether the picker appears aligned to the left or to the right the input element. |\r\n| closeOnSelect | `Boolean` | `true` | `day\\|month\\|daytime` | If set to `true` will close the date-picker after choosing a date from the calender, otherwise, won't. |\r\n| openOnClick | `Boolean` | `true` | `day\\|month\\|daytime` | If set to `false` will not open the date-picker when input gets clicked, otherwise, will. |\r\n| openOnFocus | `Boolean` | `true` | `day\\|month\\|daytime` | If set to `false` will not open the date-picker when input gets focused, otherwise, will. |\r\n| closeOnSelectDelay | `Number` | `100` | `day\\|month` | The delay (in ms) between the date selection and the date-picker collapse |\r\n| allowMultiSelect | `Boolean` | `undefined` | `day\\|month` | If set to `true` will allow for choosing multiple dates. `false` will force a single selection. If `undefined`, the picker will attempt to guess based on the type of the input value. |\r\n| dayBtnFormat | `String` | `DD` | `day\\|daytime` | The day format of the day button in the calendar. |\r\n| dayBtnFormatter | `(Moment) => String` | `undefined` | `day\\|daytime` | The formatter (callback function) of the day button in the calendar. |\r\n| dayBtnCssClassCallback | `(Moment) => String` | `undefined` | `day\\|daytime` | Callback for adding custom CSS classes to the day button in the calendar. Can contain multiple classes, just seperate with a space. |\r\n| enableMonthSelector | `Boolean` | `true` | `day\\|daytime` | Whether to enable/disable the selection of a moth granularity picker. |\r\n| firstDayOfWeek | `String` | `\"su\"` | `day\\|daytime` | The first day of the calendar's week. Should be one of: `\"su\", \"mo\", \"tu\", \"we\", \"th\", \"fr\", \"sa\"` |\r\n| isDayDisabledCallback | `(Moment) => boolean` | `undefined` | `day\\|daytime` | Callback which should indicate if specific day is disabled. |\r\n| monthFormat | `String` | `\"MMM-YYYY\"` | `day\\|daytime` | The date format of the day calendar, the one that seen above the calendar days. Will be overwritten if `monthFormatter` provided. |\r\n| monthFormatter | `(Moment) => String` | `undefined` | `day\\|daytime` | The date formatter (callback function) of the day calendar, the one that seen above the calendar days. |\r\n| showNearMonthDays | `Boolean` | `true` | `day\\|daytime` | Whether to show/hide next and previous month days. |\r\n| showWeekNumbers | `Boolean` | `false` | `day\\|daytime` | Whether to show/hide the week number of each week (iso week number). |\r\n| isMonthDisabledCallback | `(Moment) => boolean` | `undefined` | `day\\|month\\|daytime` | Callback which should indicate if specific month is disabled (month selector). |\r\n| max | `Moment\\|String` | `undefined` | `day\\|month\\|daytime` | Disables all dates (on the date-picker) that are set to after the `max`, note that if invalid date would be set by the input then the date picker value would be the max date but the input will show the user typed date. |\r\n| min | `Moment\\|String` | `undefined` | `day\\|month\\|daytime` | Disables all dates (on the date-picker) that are set to before the `min`, note that if invalid date would be set by the input then the date picker value would be the min date but the input will show the user typed date. |\r\n| monthBtnFormat | `String` | `DD` | `day\\|month\\|daytime` | The month format of the month button in the calendar. |\r\n| monthBtnFormatter | `(Moment) => String` | `undefined` | `day\\|month\\|daytime` | The formatter (callback function) of the month button in the calendar. |\r\n| monthBtnCssClassCallback | `(Moment) => String` | `undefined` | `day\\|month\\|daytime` | Callback for adding custom CSS classes to the month button in the calendar. Can contain multiple classes, just seperate with a space. |\r\n| yearFormat | `String` | `\"YYYY\"` | `day\\|month\\|daytime` | The date format of the month calendar, the one that seen above the calendar months. Will be overwritten if `yearFormatter` provided. (available when `enableMonthSelector` is set to `true`). |\r\n| yearFormatter | `(Moment) => String` | `undefined` | `day\\|month\\|daytime` | The date formatter (callback function) of the month calendar, the one that seen above the calendar months. (available when `enableMonthSelector` is set to `true`). |\r\n| hours12Format | `String` | `\"hh\"` | `daytime\\|time` | The hours format of the time select when `showTwentyFourHours` is `false`. |\r\n| hours24Format | `String` | `\"HH\"` | `daytime\\|time` | The hours format of the time select when `showTwentyFourHours` is `true`. |\r\n| maxTime | `Moment\\|String` | `undefined` | `daytime\\|time` | Disables arrow buttons on the time select that would make the time after the `maxTime`. |\r\n| meridiemFormat | `String` | `\"A\"` | `daytime\\|time` | The AM/PM format of the time select when `showTwentyFourHours` is `false`. |\r\n| minTime | `Moment\\|String` | `undefined` | `daytime\\|time` | Disables arrow buttons on the time select that would make the time before the `minTime`. |\r\n| minutesFormat | `String` | `\"mm\"` | `daytime\\|time` | The minutes format of the time select. |\r\n| minutesInterval | `number` | `1` | `daytime\\|time` | The number of minutes that will be added/subtracted when clicking up/down arrows on the time select. |\r\n| secondsFormat | `String` | `\"ss\"` | `daytime\\|time` | The seconds format of the time select. |\r\n| secondsInterval | `number` | `1` | `daytime\\|time` | The number of seconds that will be added/subtracted when clicking up/down arrows on the time select. |\r\n| showSeconds | `boolean` | `false` | `daytime\\|time` | If set to `true` will show seconds in the time select, otherwise, won't. |\r\n| showTwentyFourHours | `boolean` | `false` | `daytime\\|time` | If set to `true` will show hours in 24 hour format. `false` will show hours in 12 hours format and append AM/PM to the end of the time select. |\r\n| timeSeparator | `String` | `\":\"` | `daytime\\|time` | The separator that will be placed between hours and minutes and between minutes and seconds on the time select. |\r\n| showMultipleYearsNavigation | `boolean` | `false` | `day\\|month\\|daytime` | If set to `true` will show buttons to navigate by multiple years (10 by default) |\r\n| multipleYearsNavigateBy | `number` | `10` | `day\\|month\\|daytime` | Number of years to navigate when showMultipleYearsNavigation is `true` |\r\n| returnedValueType | `ECalendarValue` | `Moment` | All | The returned value type (`Moment`, `Moment[]`, `string`, `string[]` |\r\n| unSelectOnClick | `boolean` | `true` | `day\\|month` | Will allow disallow/unselect to selected date by clicking on the selected date |\r\n| inputElementContainer | `string\\|HTMLElement` | `undefined` | All | Will place picker popup relative to the provided elemenr (if string provided will used as a selector) |\r\n| showGoToCurrent | `boolean` | `true` | All | Show/Hides the go to current button on the calendars navigation |\r\n| hideOnOutsideClick | `boolean` | `true` | All | Show/Hides the picker popup after click outside of the component |\r\n\r\n### API:\r\nIn order to use the date-picker api user the `@ViewChild` annotation in the date-picker containing component class, take at the example below: \r\nContainer component:\r\n```ts \r\nimport {Component, ViewChild} from '@angular/core';\r\nimport {DatePickerComponent} from 'ng2-jalali-date-picker';\r\n\r\n@Component({\r\nselector: 'my-container',\r\ntemplate: `\r\n
\r\n
Container
\r\n \r\n \r\n \r\n
\r\n`\r\n});\r\nclass MyContainer {\r\n @ViewChild('dayPicker') datePicker: DatePickerComponent;\r\n\r\n open() {\r\n this.datePicker.api.open();\r\n }\r\n\r\n close() {\r\n this.datePicker.api.close();\r\n }\r\n} \r\n```\r\n\r\nIf you want to use API with [`Directive`](#directive) - you can do it by using `#dateDirectivePicker`, like below:\r\n```ts\r\nimport {Component, ViewChild} from '@angular/core';\r\nimport {DatePickerDirective} from 'ng2-date-picker';\r\n\r\n@Component({\r\nselector: 'my-container',\r\ntemplate: `\r\n
\r\n \r\n \r\n
\r\n`\r\n});\r\nclass MyContainer {\r\n @ViewChild('dateDirectivePicker') datePickerDirective: DatePickerDirective;\r\n\t\r\n close() {\r\n this.datePickerDirective.api.close();\r\n }\r\n} \r\n```\r\n\r\nHere is the list of APIs: \r\n\r\n| Name | Signature | Description |\r\n|----------------------|:----------------------------------:|----------------------------------|\r\n| open | `() => void` | Opens the date picker |\r\n| close | `() => void` | Closes the date picker |\r\n| moveCalendarTo | `(to: Moment \\| String) => void` | Moves calendar to specific date |\r\n\r\n## Inline - Day Calendar\r\n\r\nYou can use the `` component to display the calendar widget without an associated input box.\r\n\r\ni.e.\r\n```html\r\n\r\n```\r\n\r\n### Attributes: \r\n| Name | Type | Default | Description |\r\n|----------------------|:-------------------:|:------------------------------------------------------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| required | `Boolean` | `undefined` | This is a validation rule, if there won't be any selected date then the containing form will be invalid. |\r\n| minDate | `Moment\\|String` | `undefined` | This is a validation rule, if the selected date will be before `minDate` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| maxDate | `Moment\\|String` | `undefined` | This is a validation rule, if the selected date will be after `maxDate` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| theme | `String` | `''` | Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo. |\r\n| config | `IDayPickerConfig` | See Below | Configuration object - see description below. |\r\n\r\n### Attributes (Output): \r\n\r\n| Name | Event Arguments | Description |\r\n|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| onSelect | `IDay` | This event will be emitted when a day is selected. |\r\n| onMonthSelect | `IMonth` | This event will be emitted when a month is selected. |\r\n| onNavHeaderBtnClick | `ECalendarMode` | This event will be emitted when the mode of the calendar switches form day to month and vise versa. |\r\n| onGoToCurrent | void | This event will be emitted when click was made on go to current button. |\r\n| onLeftNav | void | This event will be emitted when click was made on left navigation button. |\r\n| onRightNav | void | This event will be emitted when click was made on right navigation button. |\r\n\r\n### Configuration: \r\nIn order to provide configurations to the day-calendar you need to pass it to the `dp-day-calendar` component: \r\n```html\r\n\r\n```\r\nHere are the available configurations: \r\n\r\n| Name | Type | Default | Description |\r\n|-----------------------------|:--------------------:|:-------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| format | `String` | `\"DD-MM-YYYY\"` | If ngModel provided as `String` the format is required, this format also will be used as the input format style. |\r\n| firstDayOfWeek | `String` | `\"su\"` | The first day of the calendar's week. Should be one of: `\"su\", \"mo\", \"tu\", \"we\", \"th\", \"fr\", \"sa\"` |\r\n| monthFormat | `String` | `\"MMM-YYYY\"` | The date format of the day calendar, the one that seen above the calendar days. Will be overwritten if `monthFormatter` provided. |\r\n| monthFormatter | `(Moment) => String` | `undefined` | The date formatter (callback function) of the day calendar, the one that seen above the calendar days. |\r\n| yearFormat | `String` | `\"YYYY\"` | The date format of the month calendar, the one that seen above the calendar months. Will be overwritten if `yearFormatter` provided. (available when `enableMonthSelector` is set to `true`). |\r\n| yearFormatter | `(Moment) => String` | `undefined` | The date formatter (callback function) of the month calendar, the one that seen above the calendar months. (available when `enableMonthSelector` is set to `true`). |\r\n| allowMultiSelect | `Boolean` | `undefined` | If set to `true` will allow for choosing multiple dates. `false` will force a single selection. If `undefined`, the picker will attempt to guess based on the type of the input value. |\r\n| min | `Moment\\|String` | `undefined` | Disables all dates (on the date-picker) that are set to before the `min`, note that if invalid date would be set by the input then the date picker value would be the min date but the input will show the user typed date. |\r\n| max | `Moment\\|String` | `undefined` | Disables all dates (on the date-picker) that are set to after the `max`, note that if invalid date would be set by the input then the date picker value would be the max date but the input will show the user typed date. |\r\n| showNearMonthDays | `Boolean` | `true` | Whether to show/hide next and previous month days. |\r\n| showWeekNumbers | `Boolean` | `false` | Whether to show/hide the week number of each week (iso week number). |\r\n| enableMonthSelector | `Boolean` | `true` | Whether to enable/disable the selection of a moth granularity picker. |\r\n| isDayDisabledCallback | `(Moment) => boolean`| `undefined` | Callback which should indicate if specific day is disabled. |\r\n| isMonthDisabledCallback | `(Moment) => boolean`| `undefined` | Callback which should indicate if specific month is disabled (month selector). |\r\n| dayBtnFormat | `String` | `DD` | The day format of the day button in the calendar. |\r\n| dayBtnFormatter | `(Moment) => String` | `undefined` | The formatter (callback function) of the day button in the calendar. |\r\n| dayBtnCssClassCallback | `(Moment) => String` | `undefined` | Callback which can add custom CSS classes to the day button in the calendar. Multiple classes can be returned with a space between them. |\r\n| monthBtnFormat | `String` | `DD` | The month format of the month button in the calendar. |\r\n| monthBtnFormatter | `(Moment) => String` | `undefined` | The formatter (callback function) of the month button in the calendar. |\r\n| monthBtnCssClassCallback | `(Moment) => String` | `undefined` | Callback which can add custom CSS classes to the month button in the calendar. Multiple classes can be returned with a space between them. |\r\n| showMultipleYearsNavigation | `boolean` | `false` | If set to `true` will show buttons to navigate by multiple years (10 by default) |\r\n| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` |\r\n\r\n## Inline - Month Calendar\r\n\r\nYou can use the `` component to display the calendar widget without an associated input box.\r\ni.e.\r\n```html\r\n\r\n```\r\n\r\n### Attributes: \r\n| Name | Type | Default | Description |\r\n|----------------------|:--------------------:|:--------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| required | `Boolean` | `undefined` | This is a validation rule, if there won't be any selected date then the containing form will be invalid. |\r\n| minDate | `Moment\\|String` | `undefined` | This is a validation rule, if the selected date will be before `minDate` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| maxDate | `Moment\\|String` | `undefined` | This is a validation rule, if the selected date will be after `maxDate` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| theme | `String` | `''` | Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo. |\r\n| config | `IMonthPickerConfig` | See Below | Configuration object - see description below. |\r\n\r\n### Attributes (Output): \r\n\r\n| Name | Event Arguments | Description |\r\n|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| onSelect | `IMonth` | This event will be emitted when a month is selected. |\r\n| onNavHeaderBtnClick | `null` | This event will be emitted when the mode button, in the navigation section, was clicked. |\r\n| onGoToCurrent | void | This event will be emitted when click was made on go to current button. |\r\n| onLeftNav | void | This event will be emitted when click was made on left navigation button. |\r\n| onRightNav | void | This event will be emitted when click was made on right navigation button. |\r\n\r\n\r\n### Configuration: \r\nIn order to provide configurations to the month-calendar you need to pass it to the `dp-month-calendar` component: \r\n```html\r\n\r\n```\r\nHere are the available configurations: \r\n\r\n| Name | Type | Default | Description |\r\n|-----------------------------|:--------------------:|:-------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| format | `String` | `\"DD-MM-YYYY\"` | If ngModel provided as `String` the format is required, this format also will be used as the input format style. |\r\n| yearFormat | `String` | `\"YYYY\"` | The date format of the month calendar, the one that seen above the calendar months. Will be overwritten if `yearFormatter` provided. (available when `enableMonthSelector` is set to `true`). |\r\n| yearFormatter | `(Moment) => String` | `undefined` | The date formatter (callback function) of the month calendar, the one that seen above the calendar months. (available when `enableMonthSelector` is set to `true`). |\r\n| allowMultiSelect | `Boolean` | `undefined` | If set to `true` will allow for choosing multiple dates. `false` will force a single selection. If `undefined`, the picker will attempt to guess based on the type of the input value. |\r\n| min | `Moment\\|String` | `undefined` | Disables all dates (on the date-picker) that are set to before the `min`, note that if invalid date would be set by the input then the date picker value would be the min date but the input will show the user typed date. |\r\n| max | `Moment\\|String` | `undefined` | Disables all dates (on the date-picker) that are set to after the `max`, note that if invalid date would be set by the input then the date picker value would be the max date but the input will show the user typed date. |\r\n| isMonthDisabledCallback | `(Moment) => boolean`| `undefined` | Callback which should indicate if specific month is disabled (month selector). |\r\n| monthBtnFormat | `String` | `DD` | The month format of the month button in the calendar. |\r\n| monthBtnFormatter | `(Moment) => String` | `undefined` | The formatter (callback function) of the month button in the calendar. |\r\n| monthBtnCssClassCallback | `(Moment) => String` | `undefined` | Callback which can add custom CSS classes to the month button in the calendar. Multiple classes can be returned with a space between them. |\r\n| showMultipleYearsNavigation | `boolean` | `false` | If set to `true` will show buttons to navigate by multiple years (10 by default) |\r\n| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` |\r\n\r\nHere is the list of APIs: \r\n\r\n| Name | Signature | Description |\r\n|----------------------|:-----------------------------------------------------------------------------------:|----------------------------------|\r\n| moveCalendarsBy | `(current: Moment, amount: number, granularity: moment.unitOfTime.Base) => void` | Moves calendar by given amount |\r\n| moveCalendarTo | `(to: Moment \\| String) => void` | Moves calendar to specific date |\r\n| toggleCalendarMode | `(mode: day \\| month) => void` | Changes clander mode day/month |\r\n\r\n\r\n## Inline - Time Select\r\n\r\nYou can use the `` component to display the time select widget without an associated input box.\r\n\r\ni.e.\r\n```html\r\n\r\n```\r\n\r\n### Attributes: \r\n| Name | Type | Default | Description |\r\n|----------------------|:--------------------:|:--------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| required | `Boolean` | `undefined` | This is a validation rule, if there won't be any selected date then the containing form will be invalid. |\r\n| minTime | `Moment\\|String` | `undefined` | This is a validation rule, if the selected date will be before `minTime` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| maxTime | `Moment\\|String` | `undefined` | This is a validation rule, if the selected date will be after `maxTime` the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object. |\r\n| theme | `String` | `''` | Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo. |\r\n| config | `ITimeSelectConfig` | See Below | Configuration object - see description below. |\r\n\r\n### Attributes (Output): \r\n\r\n| Name | Event Arguments | Description |\r\n|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| onChange | `IDate` | This event will be emitted when time is selected. |\r\n\r\n\r\n### Configuration: \r\nIn order to provide configurations to the time-select you need to pass it to the `dp-time-select` component: \r\n```html\r\n\r\n```\r\nHere are the available configurations: \r\n\r\n| Name | Type | Default | Description |\r\n|---------------------------|:--------------------:|:-------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\r\n| hours12Format | `String` | `\"hh\"` | The hours format of the time select when `showTwentyFourHours` is `false`. |\r\n| hours24Format | `String` | `\"HH\"` | The hours format of the time select when `showTwentyFourHours` is `true`. |\r\n| maxTime | `Moment\\|String` | `undefined` | Disables arrow buttons on the time select that would make the time after the `maxTime`. ","readmeFilename":"README.md"}
![\"date](\"./screenshots/date_picker.png\")
![\"date](\"./screenshots/date_time_picker.png\")
![\"month](\"./screenshots/month_picker.png\")
\r\n\r\n## Installation:\r\n1. Download from npm:\r\n`npm install ng2-jalali-date-picker --save` \r\n2. import the `DpDatePickerModule` module in typescript (.ts) or es6 files like below: \r\n `import {DpDatePickerModule} from 'ng2-jalali-date-picker';` \r\n3. Add `DpDatePickerModule` to your module imports: \r\n```ts\r\n @NgModule({\r\n ...\r\n imports: [\r\n ...\r\n DpDatePickerModule\r\n ]\r\n })\r\n```\r\n\r\n## How to use\r\n\r\n```html\r\n