Skip to content

Commit 9ee8035

Browse files
vlio20vlio20
committed
adding outputs to README - resolves #243 
1 parent 5563c02 commit 9ee8035

File tree

4 files changed

+40
-9
lines changed

4 files changed

+40
-9
lines changed

‎CHANGELOG.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ All notable changes to this project will be documented in this file.
1111
- Moving go to current button inside the navigation component ([dd283c5](https://github.com/vlio20/angular-datepicker/commit/dd283c5)).
1212

1313
### Bug Fixed
14-
- Picker not always opens according to drops/opens ([c26d168](https://github.com/vlio20/angular-datepicker/commit/c26d168)) closes [#222](https://github.com/vlio20/angular-datepicker/issues/222)
14+
- Add outputs of each component to docs ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#224](https://github.com/vlio20/angular-datepicker/issues/224)
1515
- More than one picker can be opened at the same time ([dd283c5](https://github.com/vlio20/angular-datepicker/commit/dd283c5)) closes [#223](https://github.com/vlio20/angular-datepicker/issues/223)
16+
- Picker not always opens according to drops/opens ([c26d168](https://github.com/vlio20/angular-datepicker/commit/c26d168)) closes [#222](https://github.com/vlio20/angular-datepicker/issues/222)
1617

1718
### Breaking Changes
1819
- Go to current button moved from input element to the navigation component ([dd283c5](https://github.com/vlio20/angular-datepicker/commit/dd283c5)).

‎README.md

+32-5
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ Put the dp-date-picker component wherever you need it.
5151

5252
### Attributes (Output):
5353

54-
| Name | Type | Applies To | Description |
55-
|----------------------|:-----------------------------------:|:-------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
56-
| 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. | |
57-
58-
54+
| Name | Event Arguments | Applies To | Description |
55+
|----------------------|:-----------------------------------:|:-------------------------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
56+
| 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. |
57+
| open | `undefined` | All Pickers | This event will be emitted when picker is opened. |
58+
| close | `CalendarValue` | All Pickers | This event will be emitted when picker is closed. |
5959

6060
### Configuration:
6161
In order to provide configurations to the date-picker you need to pass it to the `dp-date-picker` component:
@@ -168,6 +168,14 @@ i.e.
168168
| 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. |
169169
| config | `IDayPickerConfig` | See Below | Configuration object - see description below. |
170170

171+
### Attributes (Output):
172+
173+
| Name | Event Arguments | Description |
174+
|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|
175+
| onSelect | `IDay` | This event will be emitted when a day is selected. |
176+
| onMonthSelect | `IMonth` | This event will be emitted when a month is selected. |
177+
| onNavHeaderBtnClick | `ECalendarMode` | This event will be emitted when the mode of the calendar switches form day to month and vise versa. |
178+
171179
### Configuration:
172180
In order to provide configurations to the day-calendar you need to pass it to the `dp-day-calendar` component:
173181
```html
@@ -218,6 +226,14 @@ i.e.
218226
| 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. |
219227
| config | `IMonthPickerConfig` | See Below | Configuration object - see description below. |
220228

229+
### Attributes (Output):
230+
231+
| Name | Event Arguments | Description |
232+
|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|
233+
| onSelect | `IMonth` | This event will be emitted when a month is selected. |
234+
| onNavHeaderBtnClick | `null` | This event will be emitted when the mode button, in the navigation section, was clicked. |
235+
236+
221237
### Configuration:
222238
In order to provide configurations to the month-calendar you need to pass it to the `dp-month-calendar` component:
223239
```html
@@ -259,6 +275,13 @@ i.e.
259275
| 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. |
260276
| config | `ITimeSelectConfig` | See Below | Configuration object - see description below. |
261277

278+
### Attributes (Output):
279+
280+
| Name | Event Arguments | Description |
281+
|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|
282+
| onChange | `IDate` | This event will be emitted when time is selected. |
283+
284+
262285
### Configuration:
263286
In order to provide configurations to the time-select you need to pass it to the `dp-time-select` component:
264287
```html
@@ -300,6 +323,10 @@ i.e.
300323
| 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. |
301324
| config | `IDatePickerConfig` | See Below | Configuration object - see description below. |
302325

326+
| Name | Event Arguments | Description |
327+
|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|
328+
| onChange | `IDate` | This event will be emitted when time is selected. |
329+
303330
### Configuration:
304331
In order to provide configurations to the day-time-calendar you need to pass it to the `dp-day-time-calendar` component:
305332
```html

‎src/app/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
export {IDate} from './common/models/date.model';
2+
export {ECalendarMode} from './common/types/calendar-mode-enum';
3+
export {IDay} from './day-calendar/day.model';
4+
export {IMonth} from './month-calendar/month.model';
15
export {ECalendarValue} from './common/types/calendar-value-enum';
26
export {CalendarValue} from './common/types/calendar-value';
37
export {IDayCalendarConfig} from './day-calendar/day-calendar-config.model';

‎src/app/time-select/time-select.component.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {ECalendarValue} from '../common/types/calendar-value-enum';
22
import {SingleCalendarValue} from '../common/types/single-calendar-value';
3-
import {ECalendarMode} from '../common/types/calendar-mode-enum';
43
import {
54
Component,
65
EventEmitter,
@@ -58,9 +57,9 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
5857
@Input() minTime: Moment | string;
5958
@Input() maxTime: Moment | string;
6059
@HostBinding('class') @Input() theme: string;
60+
6161
@Output() onChange: EventEmitter<IDate> = new EventEmitter();
6262

63-
CalendarType = ECalendarMode;
6463
isInited: boolean = false;
6564
componentConfig: ITimeSelectConfig;
6665
_selected: Moment;
@@ -131,7 +130,7 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
131130
registerOnChange(fn: any): void {
132131
this.onChangeCallback = fn;
133132
}
134-
133+
135134
onChangeCallback(_: any) {
136135
};
137136

0 commit comments

Comments
 (0)