feat(igx-date-range-picker): add igxDateRangePicker component #5732 (#7018)

Co-authored-by: MPopov <[email protected]>
Co-authored-by: wnvko <[email protected]>
Co-authored-by: plamenamiteva <[email protected]>
Co-authored-by: ViktorSlavov <[email protected]>
Co-authored-by: IvayloG <[email protected]>
Co-authored-by: NikolayAlipiev <[email protected]>

Author: 6 people

CHANGELOG.md

@@ -19,6 +19,66 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 
+- `IgxDateTimeEditor` directive added.
+    - Allows the user to set and edit `date` and `time` in a chosen input element.
+    - Can edit `date` or `time` portion, using an editable masked input.
+    - Additionally, can specify a desired `display` and `input` `format`, as well as `min` and `max` values.
+
+    - A basic configuration scenario setting a Date object as a `value`:
+    ```html
+    <igx-input-group>
+        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
+    </igx-input-group>
+    ```
+    - Two-way data-binding via an ngModel:
+    ```html
+    <igx-input-group>
+        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
+    </igx-input-group>
+    ```
+- `IgxDateRangePicker` component added.
+    - Allows the selection of a range of dates from a calendar UI or input fields. Supports `dialog` and `dropdown` modes.
+    - Added `IgxDateStartComponent` and `IgxDateEndComponent`.
+    - The default template consists of a single *readonly* field:
+    ```html
+    <igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
+    ```
+    - Projection of input fields using `igxDateTimeEditor`
+        ```html
+        <igx-date-range-picker>
+            <igx-date-range-start>
+                <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
+            </igx-date-range-start>
+            <igx-date-range-end>
+                <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
+            </igx-date-range-end>
+        </igx-date-range-picker>
+        ```
+    - Added `IgxPickerToggleComponent` which allows templating of the default icon in the input through `igxPrefix` and `igxSuffix`.
+        - default template:
+        ```html
+        <igx-date-range-picker>
+            <igx-picker-toggle igxSuffix>
+                <igx-icon>calendar_view_day</igx-icon>
+            </igx-picker-toggle>
+        </igx-date-range-picker>
+        ```
+        - with projections:
+        ```html
+        <igx-date-range-picker>
+            <igx-date-range-start>
+                ...
+                <igx-picker-toggle igxPrefix>
+                    <igx-icon>calendar_view_day</igx-icon>
+                </igx-picker-toggle>
+                ...
+            </igx-date-range-start>
+            <igx-date-range-end>
+                ...
+            </igx-date-range-end>
+        </igx-date-range-picker>
+        ```
+
 - `IgxActionStrip` component added.
     - Provides a template area for one or more actions. In its simplest form the Action Strip
         is an overlay of any container and shows additional content over that container.
@@ -97,24 +157,6 @@ All notable changes for each version of this project will be documented in this
     - New `igxDragIgnore` directive that allows children of the `igxDrag` element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
     - New `dragDirection` input that can specify only one direction of dragging or both.
 
-- `IgxDateTimeEditor` directive added.
-    - Allows the user to set and edit `date` and `time` in a chosen input element.
-    - Can edit `date` or `time` portion, using an editable masked input.
-    - Additionally, can specify a desired `display` and `input` `format`, as well as `min` and `max` values.
-
-    - A basic configuration scenario setting a Date object as a `value`:
-    ```html
-    <igx-input-group>
-        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
-    </igx-input-group>
-    ```
-    - Two-way data-binding via an ngModel:
-    ```html
-    <igx-input-group>
-        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
-    </igx-input-group>
-    ```
-
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 

README.md

@@ -23,17 +23,18 @@ You can find source files under the [`src`](https://github.com/IgniteUI/igniteui
 |:--|:--|:--|:--|:--|:--|:--|:--|
 |avatar|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/avatar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar.html)|autocomplete|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html)|
 |badge|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/badge/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html)|button|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/button/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.html)|
-|banner|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/banner/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)|divider|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/button/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.html)|
-|bottom navigation|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar.html)|dragdrop|InProgress|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/directives/divider/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/divider.html)|
-|button group|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/buttonGroup/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)|filter|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/filter/README-FILTER.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html)|
-|calendar|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html)|forOf|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/for-of/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/for_of.html)|
-|card|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/card/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.html)|hint|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/input-group/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
-|carousel|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html)|input|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/input/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
-|checkbox|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/checkbox/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox.html)|label|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/label/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
-|chips|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/chips/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip.html)|layout|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/layout/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout.html)|
-|circular progress|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular_progress.html)|mask|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/mask/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/mask.html)|
-|combo|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html)|prefix|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
-|date picker|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html)|radio-group|Available||[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)|
+|banner|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/banner/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)|date time editor|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/src/app/date-time-editor/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_time_editor.html)|
+|bottom navigation|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar.html)|divider|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/button/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.html)|
+|button group|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/buttonGroup/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)|dragdrop|InProgress|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/directives/divider/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/divider.html)|
+|calendar|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html)|filter|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/filter/README-FILTER.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html)|
+|card|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/card/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.html)|forOf|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/for-of/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/for_of.html)|
+|carousel|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html)|hint|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/input-group/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
+|checkbox|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/checkbox/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox.html)|input|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/input/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
+|chips|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/chips/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip.html)|label|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/label/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
+|circular progress|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular_progress.html)|layout|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/layout/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout.html)|
+|combo|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html)|mask|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/mask/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/mask.html)|
+|date picker|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html)|prefix|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
+|date range picker|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_range_picker.html)|radio-group|Available||[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)|
 |dialog|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/dialog/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html)|ripple|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/ripple/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple.html)|
 |drop down|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop_down.html)|suffix|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/input-group/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html)|
 |expansion panel|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/expansion-panel/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/expansion_panel.html)|text-highlight|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/directives/text-highlight/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/texthighlight.html)|

projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts

@@ -0,0 +1,7 @@
+export interface IDateRangePickerResourceStrings {
+    igx_date_range_picker_date_separator?: string;
+}
+
+export const DateRangePickerResourceStringsEN: IDateRangePickerResourceStrings = {
+    igx_date_range_picker_date_separator: 'to'
+};

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -1,3 +1,4 @@
+import { DateRangePickerResourceStringsEN } from './date-range-picker-resources';
 import { IGridResourceStrings, GridResourceStringsEN } from './grid-resources';
 import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-picker-resources';
 import { PaginatorResourceStringsEN } from './paginator-resources';
@@ -11,8 +12,9 @@ export interface IResourceStrings extends IGridResourceStrings, ITimePickerResou
  */
 export const CurrentResourceStrings = {
     GridResStrings: cloneValue(GridResourceStringsEN),
-    TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
     PaginatorResStrings: cloneValue(PaginatorResourceStringsEN),
+    TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
+    DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
 };
 

projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-component.scss

@@ -0,0 +1,41 @@
+//// Range Picker
+/// @group components
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(igx-date-range-picker) {
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %igx-date-range-picker !optional;
+
+    @include e(label) {
+        @extend %igx-date-range-picker__label !optional;
+    }
+
+    @include e(start) {
+        @extend %igx-date-range-picker__start !optional;
+    }
+
+    @include e(end) {
+        @extend %igx-date-range-picker__end !optional;
+    }
+
+    @include m(cosy){
+        @extend %igx-date-range-picker !optional;
+        @extend %igx-date-range-picker--cosy !optional;
+    }
+
+
+    @include m(compact){
+        @extend %igx-date-range-picker !optional;
+        @extend %igx-date-range-picker--compact !optional;
+    }
+}
+
+@include b(igx-date-range-picker-buttons) {
+    @extend %igx-date-range-picker-buttons !optional;
+}
+