feat(igx-date-range): add mode sample #1574

live-editing/configs/DateRangePickerConfigGenerator.ts

@@ -3,6 +3,8 @@ import { BasicDateRangePickerComponent
 } from "../../src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic";
 import { FlightBookingComponent
 } from "../../src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking";
+import { DateRangePickerModeComponent
+} from "../../src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode";
 import { DateRangePickerStartEndComponent
 } from "../../src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end";
 import { StyledDateRangePickerComponent
@@ -29,6 +31,18 @@ export class DateRangePickerConfigGenerator implements IConfigGenerator {
             })
         );
 
+        configs.push(
+            new Config({
+                component: DateRangePickerModeComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, DateRangePickerModeComponent],
+                    ngDeclarations: [DateRangePickerModeComponent],
+                    ngImports: [IgxDateRangePickerModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker/"
+            })
+        );
+
         configs.push(
             new Config({
                 component: DateRangePickerStartEndComponent,

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

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

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

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

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

@@ -36,6 +36,7 @@ export const schedulingRoutesData = {
     "timepicker-styling": { displayName: "Styled Timepicker", parentName: "Timepicker" },
     "basic-daterangepicker": { displayName: "Date Range Picker", parentName: "Date Range Picker" },
     "daterangepicker-start-end": { displayName: "Separate inputs", parentName: "Date Range Picker" },
+    "daterangepicker-mode": { displayName: "Separate inputs", parentName: "Date Range Picker Mode" },
     "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-routing.module.ts

@@ -26,6 +26,7 @@ import { DatepickerStylingSample } from "./datepicker/datepicker-styling-sample/
 import { BasicDateRangePickerComponent } from "./daterangepicker/daterangepicker-basic/daterangepicker-basic";
 import {
     FlightBookingComponent } from "./daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking";
+import { DateRangePickerModeComponent } from "./daterangepicker/daterangepicker-mode/daterangepicker-mode";
 import {
     DateRangePickerStartEndComponent } from "./daterangepicker/daterangepicker-start-end/daterangepicker-start-end";
 import { StyledDateRangePickerComponent } from "./daterangepicker/daterangepicker-styling/daterangepicker-styling";
@@ -220,6 +221,11 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData["basic-daterangepicker"],
         path: "basic-daterangepicker"
     },
+    {
+        component: DateRangePickerModeComponent,
+        data: schedulingRoutesData["daterangepicker-mode"],
+        path: "daterangepicker-mode"
+    },
     {
         component: DateRangePickerStartEndComponent,
         data: schedulingRoutesData["daterangepicker-start-end"],

src/app/scheduling/scheduling.module.ts

@@ -36,6 +36,7 @@ import {
     BasicDateRangePickerComponent } from "./daterangepicker/daterangepicker-basic/daterangepicker-basic";
 import {
     FlightBookingComponent } from "./daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking";
+import { DateRangePickerModeComponent } from "./daterangepicker/daterangepicker-mode/daterangepicker-mode";
 import {
     DateRangePickerStartEndComponent } from "./daterangepicker/daterangepicker-start-end/daterangepicker-start-end";
 import { StyledDateRangePickerComponent } from "./daterangepicker/daterangepicker-styling/daterangepicker-styling";
@@ -95,6 +96,7 @@ import { TimePickerStylingComponent } from "./timepicker/timepicker-styling/time
         MonthpickerStylingComponent,
         PipeWithoutTownFrom,
         BasicDateRangePickerComponent,
+        DateRangePickerModeComponent,
         DateRangePickerStartEndComponent,
         DateRangePickerValidationComponent,
         StyledDateRangePickerComponent,