Skip to content

Commit 2617474

Browse files
LipataLipata
authored
Merge branch 'master' into bpenkov/date-range-def-icon
2 parents a7e79c5 + bef1bc4 commit 2617474

File tree

3 files changed

+96
-87
lines changed

3 files changed

+96
-87
lines changed

‎CHANGELOG.md‎

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -61,34 +61,19 @@ All notable changes for each version of this project will be documented in this
6161
- `onDataPreLoad` -> `dataPreLoad`
6262
- `IgxInputGroupComponent`
6363
- **Breaking Change** - `disabled` property removed. Use the underlying `IgxInputDirective.disabled` to control the disabled state of the input group. Please make sure to update via `ng update` to migrate an usage of `disabled` in your template files. Please make sure to check out the [update guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide#from-111x-to-120x).
64-
6564
- `IgxDateTimeEditor`
66-
- **Feature** - `value` accepts ISO 8601 string format.
67-
- **Breaking Change** - `value` type could be `Date` or `string`.
6865
- **Breaking Change** - `onValueChange` event is renamed to `valueChange`.
6966
- **Breaking Change** - `isSpinLoop` property is renamed to `spinLoop`.
70-
- **Feature** - `spinDelta` input property which allows a user to provide different delta values that will be used for spinning. All parts default to `1`.
71-
- `increment` and `decrement` methods now accept an optional `delta` parameter which targets the currently spun date portion. It takes precedence over the values set in `spinDelta`.
7267
- `IgxDatePicker`
73-
- **Feature** - `value` accepts ISO 8601 string format.
74-
- **Feature** - The actions template now exposes the Calendar component as implicit context:
75-
```html
76-
<igx-date-picker>
77-
<ng-template igxPickerActions let-calendar>
78-
<button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
79-
</ng-template>
80-
</igx-date-picker>
81-
```
82-
- **Breaking Change** - `value` type could be `Date` or `string`.
8368
- **Breaking Change** - `onSelection` event is renamed to `valueChange`.
84-
- **Breaking Change** - new way to define custom elements in the `igx-date-picker` while the following properties are deleted or deprecated: `formatter`, `context`, `labelInternal`, `template`.
69+
- **Breaking Change** - new way to define custom elements in the `igx-date-picker` while the following properties are deleted or deprecated: `context`, `labelInternal`, `template`.
8570
```html
86-
<igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="dd/MM/yyyy">
71+
<igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="'dd/MM/yyyy'">
8772
<label igxLabel>Date: </label>
88-
<igx-picker-toggle igxPrefix (click)="datePicker.toggle()">
73+
<igx-picker-toggle igxPrefix>
8974
calendar_view_day
9075
</igx-picker-toggle>
91-
<igx-picker-clear igxSuffix (click)="datePicker.clear()">
76+
<igx-picker-clear igxSuffix>
9277
delete
9378
</igx-picker-clear>
9479
</igx-date-picker>
@@ -99,22 +84,23 @@ All notable changes for each version of this project will be documented in this
9984
- **Breaking Change** - `monthsViewNumber` is renamed to `displayMonthsCount`.
10085
- **Breaking Change** - `vertical` is renamed to `headerOrientation`.
10186
- **Breaking Change** - `displayData` is renamed to `displayFormat`.
102-
- **Breaking Change** - `dropDownOverlaySettings` and `modalOverlaySettings` are replaced by the `overlaySettings`.
87+
- **Breaking Change** - `dropDownOverlaySettings` and `modalOverlaySettings` are replaced by `overlaySettings`.
10388
- **Breaking Change** - `onValidationFailed` event is renamed to `validationFailed`.
10489
- **Breaking Change** - `onDisabledDate` event is removed.
10590
- **Breaking Change** - `onOpening`, `onOpened`, `onClosing` and `onClosed` events are renamed respectively to `opening`, `opened`, `closing` and `closed`.
91+
- **Breaking Change** - `igxDatePickerActions` is renamed to `igxPickerActions`
92+
- **Behavioral Change** - Upon opening, the focused date will always be the selected/bound date. If there is no selected/bound date, the date picker will focus today's date. If `minValue` and/or `maxValue` are applied and today's date (or the bound date) is outside of the specified range, the focused date will be respectively `minValue` or `maxValue`.
10693
- `IgxTimePicker`
107-
- **Feature** - `value` accepts ISO 8601 string format.
10894
- **Breaking Change** - `value` type could be `Date` or `string`.
10995
- **Breaking Change** - `onValueChanged` event is renamed to `valueChange`.
11096
- **Breaking Change** - new way to define custom elements in the `igx-time-picker` while the following properties are deleted or deprecated: `context`, `promptChar`, `displayTime`, `template`.
11197
```html
11298
<igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
11399
<label igxLabel>Time: </label>
114-
<igx-picker-toggle igxPrefix (click)="timePicker.toggle()">
100+
<igx-picker-toggle igxPrefix>
115101
alarm
116102
</igx-picker-toggle>
117-
<igx-picker-clear igxSuffix (click)="timePicker.clear()">
103+
<igx-picker-clear igxSuffix>
118104
delete
119105
</igx-picker-clear>
120106
</igx-time-picker>
@@ -125,17 +111,8 @@ All notable changes for each version of this project will be documented in this
125111
- **Breaking Change** - `vertical` is renamed to `headerOrientation`.
126112
- **Breaking Change** - `onOpening`, `onOpened`, `onClosing` and `onClosed` events are renamed respectively to `opening`, `opened`, `closing` and `closed`.
127113
- **Breaking Change** - `onValidationFailed` event is renamed to `validationFailed`.
114+
- **Behavioral Change** - The dropdown/dialog displays time portions within `minValue` and `maxValue` range if set or time between 00:00 and 24:00 in the provided `inputFormat`. The displayed values for each time portion are calculated based on the items delta always starting from zero. If the `minValue` or `maxValue` does not match the items delta, the displayed values will start/end from the next/last possible value that matches the delta. Upon opening, the selected time will be the bound value. In cases when there is not a bound value, it is outside the min/max range or does not match the items delta, the selected time will be the closest possible time that matches the items delta.
128115
- `IgxDateRangePicker`
129-
- **Feature** - `value` start and end accept ISO 8601 string format.
130-
- **Feature** - The actions template now exposes the Calendar component as implicit context:
131-
```html
132-
<igx-date-range-picker>
133-
<ng-template igxPickerActions let-calendar>
134-
<button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
135-
</ng-template>
136-
</igx-date-range-picker>
137-
```
138-
- **Breaking Change** - `value` start and end types could be `Date` or `string`.
139116
- **Breaking Change** - `rangeSelected` event is renamed to `valueChange`.
140117
- **Breaking Change** - `onOpening`, `onOpened`, `onClosing` and `onClosed` events are renamed respectively to `opening`, `opened`, `closing` and `closed`.
141118
- **Breaking Change** - `monthsViewNumber` is renamed to `displayMonthsCount`.
@@ -244,6 +221,40 @@ All notable changes for each version of this project will be documented in this
244221
}
245222
}
246223
```
224+
- `IgxDateTimeEditor`
225+
- `value` accepts ISO 8601 string format.
226+
- `spinDelta` input property which allows a user to provide different delta values that will be used for spinning. All parts default to `1`.
227+
- `increment` and `decrement` methods now accept an optional `delta` parameter which targets the currently spun date portion. It takes precedence over the values set in `spinDelta`.
228+
- `IgxDatePicker`
229+
- `value` accepts ISO 8601 string format.
230+
- The actions template now exposes the Calendar component as implicit context:
231+
```html
232+
<igx-date-picker>
233+
<ng-template igxPickerActions let-calendar>
234+
<button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
235+
</ng-template>
236+
</igx-date-picker>
237+
```
238+
- `IgxTimePicker`
239+
- `value` accepts ISO 8601 string format.
240+
- The `igxPickerActions` directive can now be used to provide custom buttons to the picker's pop-up:
241+
```html
242+
<igx-time-picker #timePicker>
243+
<ng-template igxPickerActions>
244+
<button igxButton="flat" (click)="timePicker.close()">Close</button>
245+
</ng-template>
246+
</igx-time-picker>
247+
```
248+
- `IgxDateRangePicker`
249+
- `value` start and end accept ISO 8601 string format.
250+
- The `igxPickerActions` directive can now be used to template the pickers `Done` button:
251+
```html
252+
<igx-date-range-picker #rangePicker>
253+
<ng-template igxPickerActions>
254+
<button igxButton="flat" (click)="rangePicker.close()">Close</button>
255+
</ng-template>
256+
</igx-date-range-picker>
257+
```
247258

248259
### Themes:
249260
- Breaking Changes:

‎projects/igniteui-angular/src/lib/date-picker/README.md‎

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -91,54 +91,53 @@ The date picker also supports binding through `ngModel` if two-way date-bind is
9191
# API
9292

9393
###### Inputs
94-
| Name | Type | Description |
95-
|:----------|:-------------:|:------|
96-
| `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
97-
| `todayBottonLabel` | `string` | Renders today button with custom content, which selects today date from calendar, and fill the datePicker input. |
98-
| `cancelButtonLabel` | `string` | Renders cancel button with custom content, which closes the calendar. |
99-
| `formatter` | `function` | Applied custom formatter on the selected or passed in date. |
100-
| `formatViews` | `PickersFormatViews` | Determines if `day`, `month` and `year` will be rendered in the calendar. `locale` and `calendarFormat` are taken into account as well, if present.
101-
| `disabled` | `boolean` | Disables the date picker. |
102-
| `weekStart`| `Number | WEEKDAYS` | Sets on which day will the week start. |
103-
| `locale` | `string` | Sets the locale used for formatting and displaying the dates in the calendar. For more information check out [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) page for valid formats. |
104-
| `displayFormat` | `string` | The format used to display the picker's value when it's not being edited. |
105-
| `inputFormat` | `string` | The editor's input mask. |
106-
| `disabledDates` | `DateRangeDescriptor[]` | Configure the disabled dates. |
107-
| `specialDates` | `DateRangeDescriptor[]` | Configure the special dates. |
108-
| `calendarFormat` | `PickersFormatOptions` | The calendar's format options for the day view.
109-
| `value` | `Date | string` | The date picker's value and the selected date in the calendar. |
110-
| `headerOrientation` | `'horizontal' | 'vertical'` | Determines whether the calendar's header renders in vertical or horizontal state. Applies only in dialog mode. |
111-
| `mode` | `'dropdown' | 'dialog'` | Sets whether `IgxDatePickerComponent` is in dialog or dropdown mode. |
112-
| `spinLoop` | `boolean` | Determines if the currently spun date segment should loop over. |
113-
| `spinDelta` | `DatePartDeltas` | Delta values used to increment or decrement each editor date part on spin actions. All values default to `1`.
114-
| `type` | `IgxInputGroupType` | Determines how the picker will be styled.
115-
| `displayMonthsCount` | `number` | Sets the number of displayed month views. Default is `2`. |
116-
| `hideOutsideDays`| `boolean` | Controls the visibility of the dates that do not belong to the current month. |
117-
| `overlaySettings` | `OverlaySettings` | Changes the default overlay settings used by the `IgxDatePickerComponent`.
118-
| `placeholder` | `string` | Sets the placeholder text for empty input.
119-
| `minValue` | `Date | string` | The minimum value required for the picker to remain valid.
120-
| `maxValue` | `Date | string` | The maximum value required for the editor to remain valid.
121-
122-
94+
| Name | Description | Type |
95+
|:-----|:------------|:----|
96+
| `id` | `attr.id` of the picker. | string |
97+
| `mode` | Sets whether `IgxDatePickerComponent` is in dialog or dropdown mode. | InteractionMode |
98+
| `value` | The value of the editor. | Date |
99+
| `minValue` | The minimum value required for the picker to remain valid. | Date \| string |
100+
| `maxValue` | The maximum value required for the editor to remain valid. | Date \| string |
101+
| `displayFormat` | The display value of the editor. | string |
102+
| `inputFormat` | The format that the editor will use to display the date/time. | string |
103+
| `calendarFormat` | The calendar's format options for the day view. | PickersFormatOptions |
104+
| `specialDates` | Dates that will be marked as special in the calendar. | DateRangeDescriptor[] |
105+
| `disabledDates` | Dates that will be disabled in the calendar. | DateRangeDescriptor[] |
106+
| `formatViews` | Determines if `day`, `month` and `year` will be rendered in the calendar. `locale` and `formatOptions` are taken into account as well, if present. | PickersFormatViews |
107+
| `displayMonthsCount` | Sets the number of displayed month views. Default is `2`. | number |
108+
| `hideOutsideDays` | Sets whether dates that are not part of the current month will be displayed. Default is `false`. | boolean |
109+
| `showWeekNumbers` | Shows or hides week numbers. | number |
110+
| `tabindex` | The editor's tabindex. | number |
111+
| `weekStart`| Sets the start day of the week. | number |
112+
| `locale` | Locale settings used in `displayFormat` and for localizing the calendar. | string |
113+
| `overlaySettings` | Changes the default overlay settings used by the `IgxDatePickerComponent`. | OverlaySettings |
114+
| `placeholder` | Sets the placeholder text for empty input. | string |
115+
| `disabled` | Disables or enables the picker. | boolean |
116+
| `outlet` | The container used for the pop up element. | IgxOverlayOutletDirective \| ElementRef |
117+
| `type` | Determines how the picker will be styled. | IgxInputGroupType |
118+
| `spinLoop` | Determines if the currently spun date segment should loop over. | boolean |
119+
| `spinDelta` | Delta values used to increment or decrement each editor date part on spin actions. All values default to `1`. | DatePartDeltas |
120+
| `cancelButtonLabel` | The label of the `cancel` button. No button is rendered if there is no label provided. | string |
121+
| `todayButtonLabel` | The label of the `select today` button. No button is rendered if there is no label provided. | string |
122+
| `headerOrientation` | Determines whether the calendar's header renders in `vertical` or `horizontal` state. Applies only in `dialog` mode. | 'horizontal' \| 'vertical' |
123123

124124
### Outputs
125-
| Name | Return Type | Description |
126-
|:--:|:---|:---|
127-
| `opening` | `IBaseCancelableBrowserEventArgs` | Fired when the calendar has started opening, cancelable. |
128-
| `opened` | `IBaseEventArgs` | Fired after the calendar has opened. |
129-
| `closing` | `IBaseCancelableBrowserEventArgs` | Fired when the calendar has started closing, cancelable. |
130-
| `closed` | `IBaseEventArgs` | Fired after the calendar has closed. |
131-
| `validationFailed` | `IDatePickerValidationFailedEventArgs` | Emitted when a user enters an invalid date string or when the value is not within a min/max range. |
132-
| `valueChange` | `Date` | Emitted when the picker's value changes. Allows two-way binding of `value`. |
125+
| Name | Description | Emitted with |
126+
|:-----|:------------|:----|
127+
| `opening` | Fired when the calendar has started opening, cancelable. | IBaseCancelableBrowserEventArgs |
128+
| `opened` | Fired after the calendar has opened. | IBaseEventArgs |
129+
| `closing` | Fired when the calendar has started closing, cancelable. | IBaseCancelableBrowserEventArgs |
130+
| `closed` | Fired after the calendar has closed. | IBaseEventArgs |
131+
| `valueChange` | Emitted when the picker's value changes. Allows two-way binding of `value`. | Date |
132+
| `validationFailed` | Emitted when a user enters an invalid date string or when the value is not within a min/max range. | IDatePickerValidationFailedEventArgs |
133133

134134
### Methods
135-
| Name | Arguments | Return Type | Description |
136-
|:----------:|:------|:------|:------|
137-
| `select` | `Date` | `void` | Accepts a Date object and selects the corresponding date from the calendar. |
138-
| `clear` | n/a | `void` | Clears the editor's date. |
139-
| `selectToday` | n/a | `void` | Selects today's date in calendar and changes the input field value. |
140-
| `open` | `OverlaySettings` | `void` | Opens the calendar. |
141-
| `close` | n/a | `void` | Closes the calendar. |
142-
| `toggle` | `OverlaySettings` | `void` | Toggles the calendar between opened and closed states. |
143-
| `increment` | `DatePart?, number?` | | `void` | Accepts a `DatePart` and increments it by one. If no value is provided, it defaults to the part at the position of the cursor.
144-
| `decrement` | `DatePart?, number?` | `void` | Accepts a `DatePart` and decrements it by one. If no value is provided, it defaults to the part at the position of the cursor.
135+
| Name | Description | Return type |
136+
|:-----|:------------|:----|
137+
| `select` | Accepts a Date object and selects the corresponding date from the calendar. | void |
138+
| `clear` | Clears the editor's date. | void |
139+
| `open` | Opens the calendar. | void |
140+
| `close` | Closes the calendar. | void |
141+
| `toggle` | Toggles the calendar between opened and closed states. | void |
142+
| `increment` | Accepts a `DatePart` and increments it by one. If no value is provided, it defaults to the part at the position of the cursor. | void |
143+
| `decrement` | Accepts a `DatePart` and decrements it by one. If no value is provided, it defaults to the part at the position of the cursor. | void |

‎projects/igniteui-angular/src/lib/directives/date-time-editor/README.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,15 @@ public datePart: typeof DatePart = DatePart;
9494
### API
9595
| Name | Type | Description |
9696
|:-----|:----|:------------|
97-
| `value` | Date | The value of the editor. |
97+
| `value` | Date \| string | The value of the editor. |
9898
| `displayFormat` | string | The display value of the editor. |
9999
| `inputFormat` | string | The format that the editor will use to display the date/time. |
100-
| `minValue` | string / Date | Sets the minimum value required for the editor to remain valid. |
101-
| `maxValue` | string / Date | Sets the maximum value required for the editor to remain valid. |
102-
| `isSpinLoop` | boolean | Loop over the currently spun segment. |
100+
| `minValue` | Date \| string | Sets the minimum value required for the editor to remain valid. |
101+
| `maxValue` | Date \| string | Sets the maximum value required for the editor to remain valid. |
102+
| `spinLoop` | boolean | Loop over the currently spun segment. |
103+
| `spinDelta` | DatePartDeltas | Delta values used to increment or decrement each editor date part on spin actions. All values default to `1`.
103104
| `promptChar` | string | Defines the empty characters in the mask. |
104-
| `locale` | string | Locale settings used in displayFormat. |
105+
| `locale` | string | Locale settings used in displayFormat. |
105106

106107
#### Methods
107108
| Name | Type | Description |
@@ -115,5 +116,3 @@ public datePart: typeof DatePart = DatePart;
115116
|:-----|:----|:------------|
116117
| `valueChanged` | custom | Fired when the editor's value has changed. |
117118
| `validationFailed` | custom | Fired when the editor is not within a specified range. Can revert back to a previously valid state by changing the `newValue` property of the `args` parameter. |
118-
119-

0 commit comments

Comments
 (0)