refactor(date-picker, time-picker): date-time-editor integration #6482 #6483 (#9160)

* feat(*): add PickersBaseDirective

* feat(date-time-editor): handling for wheel events

* feat(types): add new enum HeaderOrientation

* feat(date-time-editor): add preventSpeenOnWheel input

* feat(date-time-editor): can be set to suppress focus

* feat(DatePickerUtils): add method for min/max validation

* refactor(CalendarContainer): move to date-utils

* feat(PickersBaseDirective): implements EditorProvider

* refactor(picker-icons): move picker icon components to date-common

* feat(date-time-editor): add option to set spin delta per part #7169 (#8987)

* refactor(date-range): pickers base, overlay service, template buttons, valueChange

* refactor(date-editor): rename isSpinLoop to spinLoop

* feat(date-time-editor, date-range-picker, date-picker): ISO 8601 support #6994

* feat(date-picker): add readonly prop, close on escape

* refactor(advanced-filtering): update date picker template

* refactor(filtering-row): update date picker template

* refactor(excel-style-date-expr): update date picker template

* refactor(input-directive):  set disabled using hostbinding

* feat(igx-time-picker): refactoring #6482 (#8947)

* feat(date-time-editor, pickers): add migrations, changelog, readme #6482, #6483 (#9319)

Co-authored-by: Boris <[email protected]>
Co-authored-by: plamenamiteva <[email protected]>

Author: jackofdiamond5

CHANGELOG.md

@@ -30,6 +30,69 @@ All notable changes for each version of this project will be documented in this
     - `onGridInitialized` -> `gridInitialized`
     - `onDataPreLoad` -> `dataPreLoad`
 
+- `IgxDateTimeEditor`
+    - **Feature** - `value` accepts ISO 8601 string format.
+    - **Breaking Change** - `value` type could be `Date` or `string`.
+    - **Breaking Change** - `onValueChange` event is renamed to `valueChange`.
+    - **Breaking Change** - `isSpinLoop` property is renamed to `spinLoop`.
+    - **Feature** - `spinDelta` input property which allows a user to provide different delta values that will be used for spinning. All parts default to `1`.
+    - `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`.
+- `IgxDatePicker`
+    - **Feature** - `value` accepts ISO 8601 string format.
+    - **Breaking Change** - `value` type could be `Date` or `string`.
+    - **Breaking Change** - `onSelection` event is renamed to `valueChange`.
+    - **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`. 
+        ```html
+            <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="dd/MM/yyyy">
+                <label igxLabel>Date: </label>
+                <igx-picker-toggle igxPrefix (click)="datePicker.toggle()">
+                    calendar_view_day
+                </igx-picker-toggle>
+                <igx-picker-clear igxSuffix (click)="datePicker.clear()">
+                    delete
+                </igx-picker-clear>
+            </igx-date-picker>
+        ```
+    - **Breaking Change** - `mode` and `format` are replaced by `inputFormat`.
+    - **Breaking Change** - `placeholder` defaults to the `inputFormat`
+    - **Breaking Change** - `editorTabIndex` is renamed to `tabIndex`.
+    - **Breaking Change** - `monthsViewNumber` is renamed to `displayMonthsCount`.
+    - **Breaking Change** - `vertical` is renamed to `headerOrientation`.
+    - **Breaking Change** - `displayData` is renamed to `displayFormat`.
+    - **Breaking Change** - `dropDownOverlaySettings` and `modalOverlaySettings` are replaced by the `overlaySettings`.
+    - **Breaking Change** - `onValidationFailed` event is renamed to `validationFailed`.
+    - **Breaking Change** - `onDisabledDate` event is removed.
+    - **Breaking Change** - `onOpening`, `onOpened`, `onClosing` and `onClosed` events are renamed respectively to `opening`, `opened`, `closing` and `closed`.
+- `IgxTimePicker`
+    - **Feature** - `value` accepts ISO 8601 string format.
+    - **Breaking Change** - `value` type could be `Date` or `string`.
+    - **Breaking Change** - `onValueChanged` event is renamed to `valueChange`.
+    - **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`.
+        ```html
+            <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
+                <label igxLabel>Time: </label>
+                <igx-picker-toggle igxPrefix (click)="timePicker.toggle()">
+                    alarm
+                </igx-picker-toggle>
+                <igx-picker-clear igxSuffix (click)="timePicker.clear()">
+                    delete
+                </igx-picker-clear>
+            </igx-time-picker>
+        ```
+    - **Breaking Change** - `format` is replaced by `inputFormat`.
+    - **Breaking Change** - `placeholder` defaults to the `inputFormat`
+    - **Breaking Change** - `isSpinLoop` property is renamed to `spinLoop`.
+    - **Breaking Change** - `vertical` is renamed to `headerOrientation`.
+    - **Breaking Change** - `onOpening`, `onOpened`, `onClosing` and `onClosed` events are renamed respectively to `opening`, `opened`, `closing` and `closed`.
+    - **Breaking Change** - `onValidationFailed` event is renamed to `validationFailed`.
+- `IgxDateRangePicker`
+    - **Feature** - `value` start and end accept ISO 8601 string format.
+    - **Breaking Change** - `value` start and end types could be `Date` or `string`.
+    - **Breaking Change** - `rangeSelected` event is renamed to `valueChange`.
+    - **Breaking Change** - `onOpening`, `onOpened`, `onClosing` and `onClosed` events are renamed respectively to `opening`, `opened`, `closing` and `closed`.
+    - **Breaking Change** - `monthsViewNumber` is renamed to `displayMonthsCount`.
+
+
 ### New Features
 - Added `IgxTree` component
     - Allows users to render hierarchical data in an easy-to-navigate way. The control is **not** data bound and takes a declarative approach, giving users more control over what is being rendered.

projects/igniteui-angular/migrations/update-12_0_0/changes/inputs.json

@@ -88,6 +88,182 @@
                 "selector": "igx-bottom-nav-item",
                 "type": "component"
             }
+        },
+        {
+            "name": "isSpinLoop",
+            "replaceWith": "spinLoop",
+            "owner": {
+                "selector": "igxDateTimeEditor",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "editorTabIndex",
+            "replaceWith": "tabIndex",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "labelVisibility",
+            "remove": true,
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "mask",
+            "replaceWith": "inputFormat",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "monthsViewNumber",
+            "replaceWith": "displayMonthsCount",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "vertical",
+            "replaceWith": "headerOrientation",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "context",
+            "remove": true,
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayData",
+            "replaceWith": "displayFormat",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "format",
+            "replaceWith": "displayFormat",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "dropDownOverlaySettings",
+            "replaceWith": "overlaySettings",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "modalOverlaySettings",
+            "replaceWith": "overlaySettings",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "labelInternal",
+            "remove": true,
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "template",
+            "remove": true,
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "isSpinLoop",
+            "replaceWith": "spinLoop",
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "vertical",
+            "replaceWith": "headerOrientation",
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "context",
+            "remove": true,
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "template",
+            "remove": true,
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "promptChar",
+            "remove": true,
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayTime",
+            "remove": true,
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "labelVisibility",
+            "remove": true,
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "format",
+            "replaceWith": "inputFormat",
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "monthsViewNumber",
+            "replaceWith": "displayMonthsCount",
+            "owner": {
+                "selector": "igx-date-range-picker",
+                "type": "component"
+            }
         }
     ]
 }