{"id":19311997,"url":"https://github.com/weblineindia/angular-custom-datepicker","last_synced_at":"2025-02-24T03:42:41.079Z","repository":{"id":57179420,"uuid":"281328480","full_name":"weblineindia/Angular-Custom-Datepicker","owner":"weblineindia","description":"Date Picker component built in AngularJS to select date and time. Supports Angular 9 version.","archived":false,"fork":false,"pushed_at":"2020-07-21T08:34:26.000Z","size":1749,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-15T12:41:28.274Z","etag":null,"topics":["angular","angular-components","angular-datepicker","angular-datetimepicker","angular-libraries","angular-picker","angularjs","angularjs-components","angularjs-datepicker","angularjs-datetimepicker","angularjs-library","calendar-widget","datepicker","datetimepicker","day-calendar","ng-datepicker","ng2-datepicker","ng2-daterange-picker","picker-component","reusable-components"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","language":"JavaScript","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/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-21T07:34:17.000Z","updated_at":"2023-11-23T12:51:34.000Z","dependencies_parsed_at":"2022-09-14T02:10:29.033Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/Angular-Custom-Datepicker","commit_stats":null,"previous_names":["weblineindia/angularjs-custom-datepicker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Custom-Datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Custom-Datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Custom-Datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Custom-Datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/Angular-Custom-Datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240415216,"owners_count":19797599,"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","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","angular-components","angular-datepicker","angular-datetimepicker","angular-libraries","angular-picker","angularjs","angularjs-components","angularjs-datepicker","angularjs-datetimepicker","angularjs-library","calendar-widget","datepicker","datetimepicker","day-calendar","ng-datepicker","ng2-datepicker","ng2-daterange-picker","picker-component","reusable-components"],"created_at":"2024-11-10T00:32:04.335Z","updated_at":"2025-02-24T03:42:41.046Z","avatar_url":"https://github.com/weblineindia.png","language":"JavaScript","readme":"# AngularJS - Date Picker\n\nDate Picker component built in AngularJS to select date and time. Supports Angular 9 version.\n\n## Table of contents\n\n- [Demo](#demo)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [Input Attributes](#input-attributes)\n- [Output Attributes](#output-attributes)\n- [API](#api)\n- [Directive](#directive)\n- [Want to Contribute?](#want-to-contribute)\n- [Collection of Other Components](#collection-of-components)\n- [Changelog](#changelog)\n- [Credits](#credits)\n- [License](#license)\n- [Keywords](#Keywords)\n\n## Demo\n\n[![](dateandtimeNg.gif)](https://github.com/weblineindia/AngularJS-Custom-Datepicker/dateandtimeNg.gif)\n\n## Screenshots\n\n### Day: ![Imgur](https://i.imgur.com/NaOiqi7.png)\n\n### DayTime:\n\n![Imgur](https://i.imgur.com/XSyhhfv.png)\n\n### Month: ![Imgur](https://i.imgur.com/NIlPCx1.png)\n\n### Time: ![Imgur](https://i.imgur.com/y37UGkQ.png)\n\n## Getting started:\n\n1. Download from npm: \n `npm install angular-weblineindia-date-picker --save`\n2. Import the `DpDatePickerModule` module: \n `import {DpDatePickerModule} from 'angular-weblineindia-date-picker';`\n3. Add `DpDatePickerModule` to your module imports:\n\n```ts\n @NgModule({ ... imports: [ ... DpDatePickerModule ] })\n```\n\n## Usage\n\nPut the dp-date-picker component wherever you need it.\n\n### Input Attributes:\n\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### Output Attributes:\n\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\u003cdp-date-picker\n [(ngModel)]=\"selectedDate\"\n [config]=\"datePickerConfig\"\n\u003e\u003c/dp-date-picker\u003e\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) =\u003e String` | `undefined` | `day/daytime` | The formatter (callback function) of the day button in the calendar. |\n| dayBtnCssClassCallback | `(Moment) =\u003e 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) =\u003e 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) =\u003e 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) =\u003e 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) =\u003e String` | `undefined` | `day/month/daytime` | The formatter (callback function) of the month button in the calendar. |\n| monthBtnCssClassCallback | `(Moment) =\u003e 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) =\u003e 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| closeOnEnter | `boolean` | `true` | All | Hides the picker popup after enter button keypress |\n\n### API:\n\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\n````ts import {Component, ViewChild} from '@angular/core';\nimport {DatePickerComponent} from 'angular-weblineindia-date-picker';\n\n@Component({\nselector: 'my-container',\ntemplate: `\n\u003cdiv\u003e\n \u003ch1\u003eContainer\u003c/h1\u003e \u003cdp-date-picker #dayPicker\u003e\u003c/dp-date-picker\u003e \u003cbutton (click)=\"open()\"\u003e\u003c/button\u003e \u003cbutton (click)=\"close()\"\u003e\u003c/button\u003e\u003c/div\u003e\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 'angular-weblineindia-date-picker';\n\n@Component({\nselector: 'my-container',\ntemplate: `\n\u003cdiv\u003e\n \u003cinput #dateDirectivePicker=\"dpDayPicker\"\u003e \u003cbutton (click)=\"close()\"\u003e\u003c/button\u003e\u003c/div\u003e\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 | `() =\u003e void` | Opens the date picker |\n| close | `() =\u003e void` | Closes the date picker |\n| moveCalendarTo | `(to: Moment / String) =\u003e void` | Moves calendar to specific date |\n\n## Inline - Day Calendar\n\nYou can use the `\u003cdp-day-calendar\u003e` component to display the calendar widget without an associated input box.\n\ni.e.\n```html\n\u003cdp-day-calendar [(ngModel)]=\"selectedDate\" [config]=\"config\"\u003e\u003c/dp-day-calendar\u003e\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 | `IDayCalendarConfig` | See Below | Configuration object - see description below. |\n\n### Attributes (Output):\n\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\n```html\n\u003cdp-day-calendar [(ngModel)]=\"selectedDate\" [config]=\"config\"\u003e\u003c/dp-day-calendar\u003e\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) =\u003e 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) =\u003e 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) =\u003e boolean` | `undefined` | Callback which should indicate if specific day is disabled. |\n| isMonthDisabledCallback | `(Moment) =\u003e 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) =\u003e String` | `undefined` | The formatter (callback function) of the day button in the calendar. |\n| dayBtnCssClassCallback | `(Moment) =\u003e 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) =\u003e String` | `undefined` | The formatter (callback function) of the month button in the calendar. |\n| monthBtnCssClassCallback | `(Moment) =\u003e 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| numOfMonthRows | `1, 2, 3, 4, 6, 12` | `4` | Number of rows to be shown on month calendar |\n\n## Inline - Month Calendar\n\nYou can use the `\u003cdp-month-calendar\u003e` component to display the calendar widget without an associated input box. \ni.e.\n\n```html\n\u003cdp-month-calendar\n [(ngModel)]=\"selectedDate\"\n [config]=\"config\"\n\u003e\u003c/dp-month-calendar\u003e\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\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### Configuration: In order to provide configurations to the month-calendar you need to pass it to the `dp-month-calendar` component:\n\n```html\n\u003cdp-month-calendar\n [(ngModel)]=\"selectedDate\"\n [config]=\"config\"\n\u003e\u003c/dp-month-calendar\u003e\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) =\u003e 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) =\u003e 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) =\u003e String` | `undefined` | The formatter (callback function) of the month button in the calendar. |\n| monthBtnCssClassCallback | `(Moment) =\u003e 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| numOfMonthRows | `1, 2, 3, 4, 6, 12` | `4` | Number of rows to be shown on month calendar |\n\nHere is the list of APIs:\n\n| Name | Signature | Description |\n| ------------------ | :------------------------------------------------------------------------------: | ------------------------------- |\n| moveCalendarsBy | `(current: Moment, amount: number, granularity: moment.unitOfTime.Base) =\u003e void` | Moves calendar by given amount |\n| moveCalendarTo | `(to: Moment / String) =\u003e void` | Moves calendar to specific date |\n| toggleCalendarMode | `(mode: day / month) =\u003e void` | Changes clander mode day/month |\n\n## Inline - Time Select\n\nYou can use the `\u003cdp-time-select\u003e` component to display the time select widget without an associated input box.\n\ni.e.\n\n```html\n\u003cdp-time-select [(ngModel)]=\"selectedDate\" [config]=\"config\"\u003e\u003c/dp-time-select\u003e\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\n| Name | Event Arguments | Description |\n| -------- | :-------------: | :------------------------------------------------ |\n| onChange | `IDate` | This event will be emitted when time is selected. |\n\n### Configuration: In order to provide configurations to the time-select you need to pass it to the `dp-time-select` component:\n\n```html\n\u003cdp-time-select [(ngModel)]=\"selectedDate\" [config]=\"config\"\u003e\u003c/dp-time-select\u003e\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. |\n| minutesInterval | `number` | `1` | The number of minutes that will be added/subtracted when clicking up/down arrows on the time select. |\n| secondsFormat | `String` | `\"ss\"` | The seconds format of the time select. |\n| secondsInterval | `number` | `1` | The number of seconds that will be added/subtracted when clicking up/down arrows on the time select. |\n| showSeconds | `boolean` | `false` | If set to `true` will show seconds in the time select, otherwise, won't. |\n| showTwentyFourHours | `boolean` | `false` | 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` | `\":\"` | The separator that will be placed between hours and minutes and between minutes and seconds on the time select. |\n\n## Inline - DayTime Calendar\n\nYou can use the `\u003cdp-day-time-calendar\u003e` component to display the calendar widget and time select widget without an associated input box.\n\ni.e.\n\n```html\n\u003cdp-day-time-calendar\n [(ngModel)]=\"selectedDate\"\n [config]=\"config\"\n\u003e\u003c/dp-day-time-calendar\u003e\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 | `IDatePickerConfig` | See Below | Configuration object - see description below. |\n\n### Attributes (Output):\n\n| Name | Event Arguments | Description |\n| ------------- | :-------------: | :------------------------------------------------------------------------- |\n| onChange | `IDate` | This event will be emitted when time is selected. |\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-time-calendar you need to pass it to the `dp-day-time-calendar` component:\n\n```html\n\u003cdp-day-time-calendar\n [(ngModel)]=\"selectedDate\"\n [config]=\"config\"\n\u003e\u003c/dp-day-time-calendar\u003e\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) =\u003e 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) =\u003e 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) =\u003e boolean` | `undefined` | Callback which should indicate if specific day is disabled. |\n| isMonthDisabledCallback | `(Moment) =\u003e 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) =\u003e String` | `undefined` | The formatter (callback function) of the day button in the calendar. |\n| dayBtnCssClassCallback | `(Moment) =\u003e 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) =\u003e String` | `undefined` | The formatter (callback function) of the month button in the calendar. |\n| monthBtnCssClassCallback | `(Moment) =\u003e 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| 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| meridiemFormat | `String` | `\"A\"` | The AM/PM format of the time select when `showTwentyFourHours` is `false`. |\n| minutesFormat | `String` | `\"mm\"` | The minutes format of the time select. |\n| minutesInterval | `Number` | `1` | The number of minutes that will be added/subtracted when clicking up/down arrows on the time select. |\n| secondsFormat | `String` | `\"ss\"` | The seconds format of the time select. |\n| secondsInterval | `Number` | `1` | The number of seconds that will be added/subtracted when clicking up/down arrows on the time select. |\n| showSeconds | `boolean` | `false` | If set to `true` will show seconds in the time select, otherwise, won't. |\n| showTwentyFourHours | `boolean` | `false` | 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` | `\":\"` | The separator that will be placed between hours and minutes and between minutes and seconds on the time select. |\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| hideInputContainer | `Boolean` | `false` | Will hide the input element of any picker if set to `true`. |\n| weekDayFormat | `String` | `ddd` | The format of the weekday name. |\n| weekDayFormatter | `(Number) =\u003e String` | `undefined` | You can customize the value of any weekday with this configuration. The parameter of the callback will start with 0 as Sunday and so on. |\n| numOfMonthRows | `1, 2, 3, 4, 6, 12` | `4` | Number of rows to be shown on month calendar |\n\n## Directive\n\nYou can use the `[dpDayPicker]` directive to attach the picker to any component with an `ngModel` or a `FormControl` (using reactive forms).\n\ni.e.\n\n```html\n\u003cinput name=\"someName\" [(ngModel)]=\"selectedDate\" [dpDayPicker]=\"config\" /\u003e\n```\n\nor using reactive forms:\n\n```html\n\u003cinput name=\"someName\" formControlName=\"selectedDate\" [dpDayPicker]=\"config\" /\u003e\n\u003c!-- OR --\u003e\n\u003cinput\n name=\"someName\"\n [formControl]=\"selectedDateFormControl\"\n [dpDayPicker]=\"config\"\n/\u003e\n```\n\nor with `@angular/material`:\n\n```html\n\u003cmd-input-container\u003e\n \u003cinput\n mdInput\n name=\"someName\"\n [(ngModel)]=\"selectedDate\"\n [dpDayPicker]=\"config\"\n theme=\"dp-material\"\n attachTo=\".mat-input-wrapper\"\n/\u003e\u003c/md-input-container\u003e\n```\n\n### Attributes:\n\n| Name | Type | Default | Description |\n| -------- | :---------------------------------: | :---------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| mode | `'day'/'month'/'time'/'daytime'` | `'day'` | the type of the calender which will be displayed in the picker |\n| attachTo | `ElementRef/String` | `undefined` | the element used to position the picker. If `attachTo` is a `String`, it is used as a css selector to match any parent of the directive's host component. If `attachTo` is `undefined`, the host component itself is used. |\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 | `IDatePickerDirectiveConfig` | See Below | Configuration object - see description below. |\n\n### Configuration: In order to provide configurations to the date-picker you need to pass it to the `[dpDayPicker]` directive:\n\n```html\n\u003cinput [(ngModel)]=\"selectedDate\" [dpDayPicker]=\"datePickerConfig\" /\u003e\n```\n\nThe `IDatePickerDirectiveConfig` is identical to [`IDatePickerConfig`](#configuration) above except that it lacks the `showGoToCurrent` property.\n\nHere is the list of APIs:\n\n| Name | Signature | Description |\n| -------------- | :------------------------------: | ------------------------------- |\n| moveCalendarTo | `(to: Moment / String) =\u003e void` | Moves calendar to specific date |\n\n## Compatibility\n\n### Internet Explorer 10:\n\nInternet explorer 10 doesn't support hidden attribut, but you can use a css rule on `data-hidden` to hide date picker components:\n\n```css\n[data-hidden=\"true\"] {\n display: none !important;\n}\n```\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n---\n\n## Collection of Components\n\nWe have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html).\n\n---\n\n## Changelog\n\nDetailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).\n\n## Credits\n\nangular-weblineindia-date-picker is inspired by [ng2-date-picker](https://www.npmjs.com/package/ng2-date-picker).\n\n## License\n\n[MIT](https://github.com/weblineindia/AngularJS-Custom-Datepicker/blob/master/LICENSE)\n\n## Keywords\n\nangular-datetime, angular-datepicker, angularjs-date-picker, ng2-datepicker, ng-datepicker, angular-timepicker, angular-picker, angular-datepicker-component\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fangular-custom-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Fangular-custom-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fangular-custom-datepicker/lists"}