style(daterange): Add styling sample #1574, #1847

Author: IvayloG

src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html

@@ -1 +1,13 @@
-<igx-date-range-picker value="range"></igx-date-range-picker>
+<div class="date-picker-wrapper">
+    <igx-date-range-picker [(ngModel)]="range" [overlaySettings]="{ outlet: element }">
+        <igx-date-range-start>
+            <input igxInput igxDateTimeEditor type="text">
+            <igx-picker-toggle igxPrefix>
+                <igx-icon>calendar_today</igx-icon>
+            </igx-picker-toggle>
+        </igx-date-range-start>
+        <igx-date-range-end>
+            <input igxInput igxDateTimeEditor type="text">
+        </igx-date-range-end>
+    </igx-date-range-picker>
+</div>

src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss

@@ -0,0 +1,50 @@
+// in component.scss
+@import '~igniteui-angular/lib/core/styles/themes/index';
+
+// common
+$purple: #9E379F;
+$blue: #61AEDB;
+
+$custom-palette: igx-palette($primary: $blue, $secondary: $purple);
+
+$today-text: igx-color($custom-palette, "primary", 500);
+$text-color: igx-color($custom-palette, "secondary", 200);
+$color-focused: igx-color($custom-palette, "secondary", 500);
+
+
+// DATE-RANGE
+$custom-date-range-theme: igx-date-range-picker-theme(
+    $label-color: $color-focused
+);
+
+// INPUT GROUP
+$input-group-theme: igx-input-group-theme(
+  $palette: $custom-palette,
+  $filled-text-color: $text-color,
+  $idle-text-color: $text-color,
+  $focused-text-color: $color-focused,
+  $hover-bottom-line-color: $color-focused,
+  $idle-bottom-line-color: $purple
+);
+
+// CALENDAR styling specific overlay component requires outlet -> [overlaySettings]="{ outlet: element }"
+$roundness: 0.5;
+$custom-calendar-theme: igx-calendar-theme(
+    $palette: $custom-palette,
+    $date-current-text-color: $today-text,
+    $border-radius: $roundness,
+    $date-border-radius: $roundness
+);
+
+:host {
+    ::ng-deep {
+        @include igx-date-range-picker($custom-date-range-theme);
+        @include igx-input-group($input-group-theme);
+        @include igx-calendar($custom-calendar-theme);
+    }
+}
+
+.date-picker-wrapper {
+    padding: 1rem;
+    max-width: 400px;
+}

src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, ElementRef } from "@angular/core";
 
 @Component({
     selector: "styled-rangedatepicker",
@@ -7,4 +7,7 @@ import { Component } from "@angular/core";
 })
 export class StyledDateRangePickerComponent {
     public range = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
+
+    constructor(public element: ElementRef) {
+    }
 }