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

, #6483 (#9319) Co-authored-by: Boris <[email protected]> Co-authored-by: plamenamiteva <[email protected]>
IgniteUI · Apr 19, 2021 · 63a54eb · 63a54eb
1 parent b2b1758
commit 63a54eb
Show file tree

Hide file tree

Showing 12 changed files with 1,873 additions and 240 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,54 @@ All notable changes for each version of this project will be documented in this
 - `IgxDateTimeEditor`
     - `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`.
+    - **Breaking Change** - `isSpinLoop` property is renamed to `spinLoop`.
+    - **Breaking Change** - `onValueChange` event is renamed to `valueChange`
+- `IgxDatePicker`
+    - **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** - `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** - `onSelection` event is renamed to `valueChange`.
+    - **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`
+    - **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** - `isSpinLoop` property is renamed to `spinLoop`.
+    - **Breaking Change** - `vertical` is renamed to `headerOrientation`.
+    - **Breaking Change** - `onValueChanged` event is renamed to `valueChange`.
+    - **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`
+    - **Breaking Change** - `monthsViewNumber` is renamed to `displayMonthsCount`.
+    - **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`.
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

diff --git a/projects/igniteui-angular/migrations/update-12_0_0/changes/inputs.json b/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": "inputFormat",
+            "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"
+            }
         }
     ]
 }