feat(igx-date-range-picker): add styling and fixing stackblitz #1574 #1847

Author: Lipata

live-editing/configs/DateRangePickerConfigGenerator.ts

@@ -1,16 +1,14 @@
-import { FlightBookingComponent } from './../../src/app/scheduling/rangedatepicker/flight-booking/flight-booking';
-import {
-    DateRangePickerValidationComponent
-} from './../../src/app/scheduling/rangedatepicker/daterangepicker-validation/daterangepicker-validation';
-import { IgxDateRangeModule as IgxDateRangePickerModule, IgxIconModule, IgxInputGroupModule } from "igniteui-angular";
-import { BasicDateRangePickerComponent } from './../../src/app/scheduling/rangedatepicker/daterangepicker-basic/daterangepicker-basic';
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
-import {
-    DateRangePickerStartEndComponent
-} from "../../src/app/scheduling/rangedatepicker/daterangepicker-start-end copy/daterangepicker-start-end";
-export class DateTimeEditorConfigGenerator implements IConfigGenerator {
+import { BasicDateRangePickerComponent } from '../../src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic';
+import { IgxDateRangePickerModule, IgxIconModule, IgxInputGroupModule } from 'igniteui-angular';
+import { DateRangePickerStartEndComponent } from '../../src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end';
+import { DateRangePickerValidationComponent } from '../../src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation';
+import { FlightBookingComponent } from "../../src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking";
+import { StyledDateRangePickerComponent } from './../../src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling';
+
+export class DateRangePickerConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
@@ -50,6 +48,18 @@ export class DateTimeEditorConfigGenerator implements IConfigGenerator {
             })
         );
 
+        configs.push(
+            new Config({
+                component: StyledDateRangePickerComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, StyledDateRangePickerComponent],
+                    ngDeclarations: [StyledDateRangePickerComponent],
+                    ngImports: [IgxDateRangePickerModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker"
+            })
+        );
+
         configs.push(
             new Config({
                 component: FlightBookingComponent,

live-editing/generators/ConfigGenerators.ts

@@ -12,6 +12,7 @@ import { ChipConfigGenerator } from "../configs/ChipConfigGenerator";
 import { CircularProgressbarConfigGenerator } from "../configs/CircularProgressbarConfigGenerator";
 import { ComboConfigGenerator } from "../configs/ComboConfigGenerator";
 import { DatePickerConfigGenerator } from "../configs/DatePickerConfigGenerator";
+import { DateRangePickerConfigGenerator } from "../configs/DateRangePickerConfigGenerator";
 import { DateTimeEditorConfigGenerator } from "../configs/DateTimeEditorConfigGenerator";
 import { DialogConfigGenerator } from "../configs/DialogConfigGenerator";
 import { DividerConfigGenerator } from "../configs/DividerConfigGenerator";
@@ -82,6 +83,7 @@ export const CONFIG_GENERATORS =
         CheckboxConfigGenerator,
         ComboConfigGenerator,
         DatePickerConfigGenerator,
+        DateRangePickerConfigGenerator,
         DateTimeEditorConfigGenerator,
         DropDownConfigGenerator,
         InputGroupConfigGenerator,

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

@@ -0,0 +1 @@
+<igx-date-range-picker value="range"></igx-date-range-picker>

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

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "styled-rangedatepicker",
+    styleUrls: ["./daterangepicker-styling.scss"],
+    templateUrl: "./daterangepicker-styling.html"
+})
+export class StyledDateRangePickerComponent {
+    public range = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
+}

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

@@ -37,5 +37,6 @@ export const schedulingRoutesData = {
     "basic-daterangepicker": { displayName: "Date Range Picker", parentName: "Date Range Picker" },
     "daterangepicker-start-end": { displayName: "Separate inputs", parentName: "Date Range Picker" },
     "daterangepicker-validation": { displayName: "Validation", parentName: "Date Range Picker" },
+    "styled-daterangepicker": { displayName: "Styled Date Range Picker", parentName: "Date Range Picker" },
     "flight-booking": { displayName: "Flight Booking", parentName: "Date Range Picker" }
 };

src/app/scheduling/scheduling-routes-data.ts

@@ -42,6 +42,7 @@ import { TimePickerSample4Component } from "./timepicker/timepicker-sample-4/tim
 import { TimePickerSample5Component } from "./timepicker/timepicker-sample-5/timepicker-sample-5.component";
 import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/timepicker-sample-6.component";
 import { TimePickerStylingComponent } from "./timepicker/timepicker-styling/timepicker-styling.component";
+import { StyledDateRangePickerComponent } from './daterangepicker/daterangepicker-styling/daterangepicker-styling';
 
 export const schedulingRoutes: Routes = [
     {
@@ -229,6 +230,11 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData["daterangepicker-validation"],
         path: "daterangepicker-validation"
     },
+    {
+        component: StyledDateRangePickerComponent,
+        data: schedulingRoutesData["styled-daterangepicker"],
+        path: "styled-daterangepicker"
+    },
     {
         component: FlightBookingComponent,
         data: schedulingRoutesData["flight-booking"],

src/app/scheduling/scheduling-routing.module.ts

@@ -38,6 +38,7 @@ import {
     FlightBookingComponent } from "./daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking";
 import {
     DateRangePickerStartEndComponent } from "./daterangepicker/daterangepicker-start-end/daterangepicker-start-end";
+import { StyledDateRangePickerComponent } from './daterangepicker/daterangepicker-styling/daterangepicker-styling';
 import {
     DateRangePickerValidationComponent } from "./daterangepicker/daterangepicker-validation/daterangepicker-validation";
 import { DateTimeAdvancedComponent } from "./datetimeeditor/datetime-advanced/datetime-advanced";
@@ -96,6 +97,7 @@ import { TimePickerStylingComponent } from "./timepicker/timepicker-styling/time
         BasicDateRangePickerComponent,
         DateRangePickerStartEndComponent,
         DateRangePickerValidationComponent,
+        StyledDateRangePickerComponent,
         FlightBookingComponent
     ],
     imports: [