{"_id":"@atogata/ng2-date-picker","_rev":"1-e3f97bfb3ba2cf19b81117c706fcfad2","name":"@atogata/ng2-date-picker","dist-tags":{"latest":"2.11.0"},"versions":{"2.11.0":{"name":"@atogata/ng2-date-picker","author":{"name":"Vlad Ioffe"},"version":"2.11.0","license":"MIT","main":"bundles/atogata-ng2-date-picker.umd.js","repository":{"type":"git","url":"git+https://github.com/vlio20/angular-datepicker.git"},"private":false,"keywords":["angular2","date","datepicker","date-picker","ng2-datepicker","ng-datepicker","angular","picker","angular-datepicker"],"peerDependencies":{"moment":"^2.17.1"},"devDependencies":{"@angular-devkit/build-angular":"~0.11.0","@angular-devkit/core":"7.1.0","@angular/cli":"^7.1.0","@angular/common":"7.1.0","@angular/compiler":"7.1.0","@angular/compiler-cli":"7.1.0","@angular/core":"7.1.0","@angular/forms":"7.1.0","@angular/platform-browser":"7.1.0","@angular/platform-browser-dynamic":"7.1.0","@angular/router":"7.1.0","@types/google.analytics":"0.0.39","@types/jasmine":"3.3.0","@types/node":"10.12.10","classlist.js":"^1.1.20150312","codelyzer":"^4.5.0","core-js":"^2.5.7","jasmine-core":"~3.3.0","jasmine-spec-reporter":"~4.2.1","karma":"~3.1.1","karma-chrome-launcher":"~2.2.0","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^2.0.4","karma-jasmine":"^2.0.1","karma-jasmine-html-reporter":"^1.4.0","less":"^3.8.1","ncp":"^2.0.0","ng-packagr":"^4.4.0","protractor":"~5.4.1","rimraf":"^2.6.1","rxjs":"^6.3.3","ts-node":"^7.0.1","tsickle":"^0.34.0","tslib":"^1.9.3","tslint":"~5.11.0","typescript":"3.1.6","uglify-js":"^3.4.9","web-animations-js":"^2.2.5","zone.js":"^0.8.26"},"angularCompilerOptions":{"skipTemplateCodegen":true,"strictMetadataEmit":true},"dependencies":{"moment":"^2.22.2","tslib":"^1.9.0"},"module":"fesm5/atogata-ng2-date-picker.js","es2015":"fesm2015/atogata-ng2-date-picker.js","esm5":"esm5/atogata-ng2-date-picker.js","esm2015":"esm2015/atogata-ng2-date-picker.js","fesm5":"fesm5/atogata-ng2-date-picker.js","fesm2015":"fesm2015/atogata-ng2-date-picker.js","typings":"atogata-ng2-date-picker.d.ts","metadata":"atogata-ng2-date-picker.metadata.json","sideEffects":false,"description":"[](https://travis-ci.org/vlio20/angular-datepicker) [](#backers) [![Sponsor","bugs":{"url":"https://github.com/vlio20/angular-datepicker/issues"},"homepage":"https://github.com/vlio20/angular-datepicker#readme","_id":"@atogata/ng2-date-picker@2.11.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"atogata","email":"aaron.ogata@gmail.com"},"dist":{"integrity":"sha512-Y37Wvpt4ebg/gbVaiB1X6Qdgi2LjdkvqWTJazeWK4Eo6qHVkMw85wS5BgvbLI4dLtYMYsmlvihBmZ3nw0SbcGg==","shasum":"057a4fe3117babbf63407e60654f97464d011575","tarball":"https://registry.npmjs.org/@atogata/ng2-date-picker/-/ng2-date-picker-2.11.0.tgz","fileCount":144,"unpackedSize":3435418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyeqYCRA9TVsSAnZWagAAfakP+wV9Zr6P9wMiqWZhvPCY\n8qpfXaIAC2GELXcu78i+FT786v30bGxoh+Cj/ycV9p+N/nI9ydtUE981SyMv\nd0+aC3KQeXLn5rT7Dl3hDKfvYZ3ocl58aBoxxp3hjAGTQOiHkvlOjtUUkSSq\nqbmQC5EBs++lUqJQTawW6Oi6cJMfa8OUGMEU1IvVVmUtaIJHp62F6Z0B25RO\nxhOgbA74Me1qLvH9qWza5WLIXuiytlaF1M7rIZ/NlCUwgTQX5SiOnCVVNnwH\nDvE4VjjEu3Ot1QZeCCOFiK7vXbbUyfzvAu3vH/hEviwv6TgWMVCeo1fgDtfB\ngujLWIrIDjGHLQ7HPJGV/SuE13y1H4CxqLe6PNlFDYvQlTA8+OCNu16Og0do\nMfuE+Zu5JDYIADULfaotimLqvOT/oxGPKJvzR2QqSBJHtE+2c6ddFckFpBh7\nlF2R5b5GVoL9zPOCAiOc3ZRx+MNlFQ3f25QLOP8cv/TuwGCjw/1Ch9fHG24D\n+7YvJ0WNkMdxZ6n1Bv7zauGixLJufaKOkttwOJ07syNxfPRJryoMpK8OMnsk\n39CTwQ8w0YOVCLCInk87ttusHhDye5bIh6CwJqpnmimab2qRuNwxEqASCr1K\nGIVGc1egGyjI560AshY7xGmLA3AJoK47U8dxvi3W3I3TMq9Lej2pViF4ZVvW\nkMRe\r\n=3YyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClKsIEd4T6oGrkN/mlD3TsBcOgJ4RiCYVcgfgFpstmqwIgPZGrV1WxWo3ZGM4CNf1GdStjDeTfrrjNaDPTNsX2FlM="}]},"maintainers":[{"name":"atogata","email":"aaron.ogata@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng2-date-picker_2.11.0_1556736663666_0.07634379911760703"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-01T18:51:03.632Z","2.11.0":"2019-05-01T18:51:03.892Z","modified":"2022-04-04T16:14:04.428Z"},"maintainers":[{"name":"atogata","email":"aaron.ogata@gmail.com"}],"description":"[](https://travis-ci.org/vlio20/angular-datepicker) [](#backers) [![Sponsor","homepage":"https://github.com/vlio20/angular-datepicker#readme","keywords":["angular2","date","datepicker","date-picker","ng2-datepicker","ng-datepicker","angular","picker","angular-datepicker"],"repository":{"type":"git","url":"git+https://github.com/vlio20/angular-datepicker.git"},"author":{"name":"Vlad Ioffe"},"bugs":{"url":"https://github.com/vlio20/angular-datepicker/issues"},"license":"MIT","readme":"\n[](https://travis-ci.org/vlio20/angular-datepicker) \n[](#backers) [](#sponsors) [](https://badge.fury.io/js/ng2-date-picker) \n[](http://packagequality.com/#?package=ng2-date-picker) \n \n# Date Picker \nThis is a configurable date-picker build for Angular2 applications and uses MomentJS as its dependency. \n[DEMO](https://vlio20.github.io/angular-datepicker/) \n \n# Support \nThis component is 100% Open Source, but if you want your issues to be resolved more quickly, you might want to promote it via my gig on [Fiverr](https://www.fiverr.com/vladioffe/add-features-and-fix-bugs?arrived_from_manage_gigs=true&display_share=true). This way I will give a higher priority for your bug/feather request. \n\n \n\n\n \n## Screenshots \n \n### Day:  \n \n### DayTime: \n \n \n### Month:  \n \n### Time:  \n \n## Installation: \n1. Download from npm: \n`npm install ng2-date-picker --save` \n2. Import the `DpDatePickerModule` module: \n `import {DpDatePickerModule} from 'ng2-date-picker';` \n 3. Add `DpDatePickerModule` to your module imports: \n\n```ts \n @NgModule({ ... imports: [ ... DpDatePickerModule ] })\n ``` \n \n## Usage \nPut the dp-date-picker component wherever you need it. \n \n \n### Attributes (Input): \n| Name | Type | Default | Applies To | Description | \n|----------------------|:-----------------------------------:|:------------------:|:-------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| mode | `\"day\"\\|\"month\"\\|\"time\"\\|\"daytime\"` | `\"day\"` | All | The mode of the calender which will be displayed in the picker | \n| displayDate | `Moment\\|String` | current date | `day\\|month\\|daytime` | Indicates on what date to open the calendar on | \n| disabled | `Boolean` | `false` | All | If set to true the input would be disabled | \n| placeholder | `String` | `\"\"` | All | The date-picker input placeholder | \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. | \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. | \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. | \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. | \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. | \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. | \n| config | `IDatePickerConfig` | See Below | All | Configuration object - see description below. | \n \n### Attributes (Output): \n| Name | Event Arguments | Applies To | Description | \n|----------------------|:-----------------------------------:|:-------------------------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------| \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. | \n| open | `undefined` | All Pickers | This event will be emitted when picker is opened. | \n| close | `CalendarValue` | All Pickers | This event will be emitted when picker is closed. | \n| onGoToCurrent | void | All Pickers | This event will be emitted when click was made on go to current button. | \n| onLeftNav | void | All Pickers | This event will be emitted when click was made on left navigation button. | \n| onRightNav | void | All Pickers | This event will be emitted when click was made on right navigation button. | \n| onSelect | ISelectionEvent | All Pickers | This event will be emitted when a date was selected via click or input change (with appropriate indication) | \n \n### Configuration: In order to provide configurations to the date-picker you need to pass it to the `dp-date-picker` component: \n\n```html \n \n```\n\nHere are the available configurations: \n \n| Name | Type | Default | Applies To | Description | \n|-----------------------------|:---------------------:|:-------------------------------------------------------------------------:|:-------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \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). | \n| locale | `String` | [`moment.locale()`](https://momentjs.com/docs/#/i18n/getting-locale/) | All | Localisation of language (see in the demo all supported locales) | \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 | \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. | \n| onOpenDelay | `Number` | `0` | All | The delay (in ms) between the date picker focusing and the date-picker popup apparel | \n| drops | `'up'\\|'down'` | `undefined` down if possible | All | Whether the picker appears below or above the input element. | \n| opens | `'right'\\|'left'` | `undefined` right if possible | All | Whether the picker appears aligned to the left or to the right the input element. | \n| closeOnSelect | `Boolean` | `true` | `day\\|month` | If set to `true` will close the date-picker after choosing a date from the calender, otherwise, won't. | \n| openOnClick | `Boolean` | `true` | `day\\|month\\|daytime` | If set to `false` will not open the date-picker when input gets clicked, otherwise, will. | \n| openOnFocus | `Boolean` | `true` | `day\\|month\\|daytime` | If set to `false` will not open the date-picker when input gets focused, otherwise, will. | \n| closeOnSelectDelay | `Number` | `100` | `day\\|month` | The delay (in ms) between the date selection and the date-picker collapse | \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. | \n| dayBtnFormat | `String` | `DD` | `day\\|daytime` | The day format of the day button in the calendar. | \n| dayBtnFormatter | `(Moment) => String` | `undefined` | `day\\|daytime` | The formatter (callback function) of the day button in the calendar. | \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. | \n| enableMonthSelector | `Boolean` | `true` | `day\\|daytime` | Whether to enable/disable the selection of a moth granularity picker. | \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\"` | \n| isDayDisabledCallback | `(Moment) => boolean` | `undefined` | `day\\|daytime` | Callback which should indicate if specific day is disabled. | \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. | \n| monthFormatter | `(Moment) => String` | `undefined` | `day\\|daytime` | The date formatter (callback function) of the day calendar, the one that seen above the calendar days. | \n| showNearMonthDays | `Boolean` | `true` | `day\\|daytime` | Whether to show/hide next and previous month days. | \n| showWeekNumbers | `Boolean` | `false` | `day\\|daytime` | Whether to show/hide the week number of each week (iso week number). | \n| isMonthDisabledCallback | `(Moment) => boolean` | `undefined` | `day\\|month\\|daytime` | Callback which should indicate if specific month is disabled (month selector). | \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. | \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. | \n| monthBtnFormat | `String` | `DD` | `day\\|month\\|daytime` | The month format of the month button in the calendar. | \n| monthBtnFormatter | `(Moment) => String` | `undefined` | `day\\|month\\|daytime` | The formatter (callback function) of the month button in the calendar. | \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. | \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`). | \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`). | \n| hours12Format | `String` | `\"hh\"` | `daytime\\|time` | The hours format of the time select when `showTwentyFourHours` is `false`. | \n| hours24Format | `String` | `\"HH\"` | `daytime\\|time` | The hours format of the time select when `showTwentyFourHours` is `true`. | \n| maxTime | `Moment\\|String` | `undefined` | `daytime\\|time` | Disables arrow buttons on the time select that would make the time after the `maxTime`. | \n| meridiemFormat | `String` | `\"A\"` | `daytime\\|time` | The AM/PM format of the time select when `showTwentyFourHours` is `false`. | \n| minTime | `Moment\\|String` | `undefined` | `daytime\\|time` | Disables arrow buttons on the time select that would make the time before the `minTime`. | \n| minutesFormat | `String` | `\"mm\"` | `daytime\\|time` | The minutes format of the time select. | \n| minutesInterval | `number` | `1` | `daytime\\|time` | The number of minutes that will be added/subtracted when clicking up/down arrows on the time select. | \n| secondsFormat | `String` | `\"ss\"` | `daytime\\|time` | The seconds format of the time select. | \n| secondsInterval | `number` | `1` | `daytime\\|time` | The number of seconds that will be added/subtracted when clicking up/down arrows on the time select. | \n| showSeconds | `boolean` | `false` | `daytime\\|time` | If set to `true` will show seconds in the time select, otherwise, won't. | \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. | \n| timeSeparator | `String` | `\":\"` | `daytime\\|time` | The separator that will be placed between hours and minutes and between minutes and seconds on the time select. | \n| showMultipleYearsNavigation | `boolean` | `false` | `day\\|month\\|daytime` | If set to `true` will show buttons to navigate by multiple years (10 by default) | \n| multipleYearsNavigateBy | `number` | `10` | `day\\|month\\|daytime` | Number of years to navigate when showMultipleYearsNavigation is `true` | \n| returnedValueType | `ECalendarValue` | `Moment` | All | The returned value type (`Moment`, `Moment[]`, `string`, `string[]` | \n| unSelectOnClick | `boolean` | `true` | `day\\|month` | Will allow disallow/unselect to selected date by clicking on the selected date | \n| inputElementContainer | `string\\|HTMLElement` | `undefined` | All | Will place picker popup relative to the provided elemenr (if string provided will used as a selector) | \n| showGoToCurrent | `boolean` | `true` | All | Show/Hides the go to current button on the calendars navigation | \n| hideOnOutsideClick | `boolean` | `true` | All | Show/Hides the picker popup after click outside of the component | \n \n### API: \nIn order to use the date-picker api user the `@ViewChild` annotation in the date-picker containing component class, take at the example below: \nContainer component: \n```ts import {Component, ViewChild} from '@angular/core'; \nimport {DatePickerComponent} from 'ng2-date-picker'; \n \n@Component({ \nselector: 'my-container', \ntemplate: ` \n
\n
Container
\n` \n}); \nclass MyContainer { \n @ViewChild('dayPicker') datePicker: DatePickerComponent; \n open() { this.datePicker.api.open(); } \n close() { this.datePicker.api.close(); }} ``` \n \nIf you want to use API with [`Directive`](#directive) - you can do it by using `#dateDirectivePicker`, like below: \n```ts \nimport {Component, ViewChild} from '@angular/core'; \nimport {DatePickerDirective} from 'ng2-date-picker'; \n \n@Component({ \nselector: 'my-container', \ntemplate: ` \n
\n
\n` \n}); \nclass MyContainer { \n @ViewChild('dateDirectivePicker') datePickerDirective: DatePickerDirective; close() { \n this.datePickerDirective.api.close(); }} ``` \n \nHere is the list of APIs: \n \n| Name | Signature | Description | \n|----------------------|:----------------------------------:|----------------------------------| \n| open | `() => void` | Opens the date picker | \n| close | `() => void` | Closes the date picker | \n| moveCalendarTo | `(to: Moment \\| String) => void` | Moves calendar to specific date | \n \n## Inline - Day Calendar \n \nYou can use the `` component to display the calendar widget without an associated input box. \n \ni.e. \n```html \n \n``` \n \n### Attributes: \n\n| Name | Type | Default | Description | \n|----------------------|:-------------------:|:------------------------------------------------------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| required | `Boolean` | `undefined` | This is a validation rule, if there won't be any selected date then the containing form will be invalid. | \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. | \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. | \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. | \n| config | `IDayPickerConfig` | See Below | Configuration object - see description below. | \n \n### Attributes (Output): \n| Name | Event Arguments | Description | \n|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| onSelect | `IDay` | This event will be emitted when a day is selected. | \n| onMonthSelect | `IMonth` | This event will be emitted when a month is selected. | \n| onNavHeaderBtnClick | `ECalendarMode` | This event will be emitted when the mode of the calendar switches form day to month and vise versa. | \n| onGoToCurrent | void | This event will be emitted when click was made on go to current button. | \n| onLeftNav | void | This event will be emitted when click was made on left navigation button. | \n| onRightNav | void | This event will be emitted when click was made on right navigation button. | \n \n### Configuration: In order to provide configurations to the day-calendar you need to pass it to the `dp-day-calendar` component: \n```html \n \n``` \nHere are the available configurations: \n \n| Name | Type | Default | Description | \n|-----------------------------|:--------------------:|:-------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \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. | \n| firstDayOfWeek | `String` | `\"su\"` | The first day of the calendar's week. Should be one of: `\"su\", \"mo\", \"tu\", \"we\", \"th\", \"fr\", \"sa\"` | \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. | \n| monthFormatter | `(Moment) => String` | `undefined` | The date formatter (callback function) of the day calendar, the one that seen above the calendar days. | \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`). | \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`). | \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. | \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. | \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. | \n| showNearMonthDays | `Boolean` | `true` | Whether to show/hide next and previous month days. | \n| showWeekNumbers | `Boolean` | `false` | Whether to show/hide the week number of each week (iso week number). | \n| enableMonthSelector | `Boolean` | `true` | Whether to enable/disable the selection of a moth granularity picker. | \n| isDayDisabledCallback | `(Moment) => boolean`| `undefined` | Callback which should indicate if specific day is disabled. | \n| isMonthDisabledCallback | `(Moment) => boolean`| `undefined` | Callback which should indicate if specific month is disabled (month selector). | \n| dayBtnFormat | `String` | `DD` | The day format of the day button in the calendar. | \n| dayBtnFormatter | `(Moment) => String` | `undefined` | The formatter (callback function) of the day button in the calendar. | \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. | \n| monthBtnFormat | `String` | `DD` | The month format of the month button in the calendar. | \n| monthBtnFormatter | `(Moment) => String` | `undefined` | The formatter (callback function) of the month button in the calendar. | \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. | \n| showMultipleYearsNavigation | `boolean` | `false` | If set to `true` will show buttons to navigate by multiple years (10 by default) | \n| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` | \n \n## Inline - Month Calendar \n \nYou can use the `` component to display the calendar widget without an associated input box. \ni.e. \n```html \n \n``` \n \n### Attributes: \n\n| Name | Type | Default | Description | \n|----------------------|:--------------------:|:--------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| required | `Boolean` | `undefined` | This is a validation rule, if there won't be any selected date then the containing form will be invalid. | \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. | \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. | \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. | \n| config | `IMonthPickerConfig` | See Below | Configuration object - see description below. | \n \n### Attributes (Output): \n| Name | Event Arguments | Description | \n|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| onSelect | `IMonth` | This event will be emitted when a month is selected. | \n| onNavHeaderBtnClick | `null` | This event will be emitted when the mode button, in the navigation section, was clicked. | \n| onGoToCurrent | void | This event will be emitted when click was made on go to current button. | \n| onLeftNav | void | This event will be emitted when click was made on left navigation button. | \n| onRightNav | void | This event will be emitted when click was made on right navigation button. | \n \n \n### Configuration: In order to provide configurations to the month-calendar you need to pass it to the `dp-month-calendar` component: \n```html \n \n``` \nHere are the available configurations: \n \n| Name | Type | Default | Description | \n|-----------------------------|:--------------------:|:-------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \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. | \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`). | \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`). | \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. | \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. | \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. | \n| isMonthDisabledCallback | `(Moment) => boolean`| `undefined` | Callback which should indicate if specific month is disabled (month selector). | \n| monthBtnFormat | `String` | `DD` | The month format of the month button in the calendar. | \n| monthBtnFormatter | `(Moment) => String` | `undefined` | The formatter (callback function) of the month button in the calendar. | \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. | \n| showMultipleYearsNavigation | `boolean` | `false` | If set to `true` will show buttons to navigate by multiple years (10 by default) | \n| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` | \n \nHere is the list of APIs: \n \n| Name | Signature | Description | \n|----------------------|:-----------------------------------------------------------------------------------:|----------------------------------| \n| moveCalendarsBy | `(current: Moment, amount: number, granularity: moment.unitOfTime.Base) => void` | Moves calendar by given amount | \n| moveCalendarTo | `(to: Moment \\| String) => void` | Moves calendar to specific date | \n| toggleCalendarMode | `(mode: day \\| month) => void` | Changes clander mode day/month | \n \n \n## Inline - Time Select \n \nYou can use the `` component to display the time select widget without an associated input box. \n \ni.e. \n```html \n \n``` \n \n### Attributes: \n\n| Name | Type | Default | Description | \n|----------------------|:--------------------:|:--------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| required | `Boolean` | `undefined` | This is a validation rule, if there won't be any selected date then the containing form will be invalid. | \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. | \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. | \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. | \n| config | `ITimeSelectConfig` | See Below | Configuration object - see description below. | \n \n### Attributes (Output): \n| Name | Event Arguments | Description | \n|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| onChange | `IDate` | This event will be emitted when time is selected. | \n \n \n### Configuration: In order to provide configurations to the time-select you need to pass it to the `dp-time-select` component: \n```html \n \n``` \nHere are the available configurations: \n \n| Name | Type | Default | Description | \n|---------------------------|:--------------------:|:-------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| hours12Format | `String` | `\"hh\"` | The hours format of the time select when `showTwentyFourHours` is `false`. | \n| hours24Format | `String` | `\"HH\"` | The hours format of the time select when `showTwentyFourHours` is `true`. | \n| maxTime | `Moment\\|String` | `undefined` | Disables arrow buttons on the time select that would make the time after the `maxTime`. | \n| meridiemFormat | `String` | `\"A\"` | The AM/PM format of the time select when `showTwentyFourHours` is `false`. | \n| minTime | `Moment\\|String` | `undefined` | Disables arrow buttons on the time select that would make the time before the `minTime`. | \n| minutesFormat | `String` | `\"mm\"` | The minutes format of the time select. ","readmeFilename":"README.md"}
![](\"https://assetsv2.fiverrcdn.com/assets/v2_globals/fiverr-logo-new-green-9e65bddddfd33dfcf7e06fc1e51a5bc5.png\"){kind=logo}
\n