samples(date-range) Add date-range sample with two inputs #1574

Author: PlamenaMiteva

src/app/scheduling/daterange/date-range-two-inputs/daterange-two-inputs.component.html

@@ -0,0 +1,23 @@
+<div class="sample-wrapper date-range-wrapper">
+    <h4 class="sample-title">Date Range With Two Inputs</h4>
+    <p class="sample-description">Date range with start and end date input</p>
+    <div>
+        <igx-date-range [weekStart]="1" [todayButtonText]="'Show Today'" [monthsViewNumber]="1"
+                    [hideOutsideDays]="true" [mode]="'dialog'">
+                    <igx-input-group>
+                        <input #startDate igxDateRangeStart igxInput type="text">
+                        <label for="startDate" igxLabel>Start date</label>
+                        <igx-prefix>
+                            <igx-icon>today</igx-icon>
+                        </igx-prefix>
+                    </igx-input-group>
+                    <igx-input-group>
+                        <input #endDate igxDateRangeEnd igxInput type="text">
+                        <label for="endDate" igxLabel>End date</label>
+                        <igx-prefix>
+                            <igx-icon>today</igx-icon>
+                        </igx-prefix>
+                    </igx-input-group>
+                </igx-date-range>
+    </div>
+</div>

src/app/scheduling/daterange/date-range-two-inputs/daterange-two-inputs.component.scss

@@ -0,0 +1,3 @@
+.date-picker-wrapper {
+  padding: 1rem;
+}

src/app/scheduling/daterange/date-range-two-inputs/daterange-two-inputs.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+
+@Component({
+  selector: "app-daterange-sample",
+  styleUrls: ["./daterange-two-inputs.component.scss"],
+  templateUrl: "./daterange-two-inputs.component.html"
+})
+export class DateRangeTwoInputsComponent implements OnInit {
+  constructor() { }
+
+  public ngOnInit(): void {}
+}

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

@@ -18,6 +18,7 @@ export const schedulingRoutesData = {
     "datepicker-sample-7": { displayName: "Dropdown Datepicker Template", parentName: "Datepicker" },
     "datepicker-sample-8": { displayName: "Custom Action Buttons", parentName: "Datepicker" },
     "daterange-sample": { displayName: "Simple Daterange", parentName: "Daterange" },
+    "daterange-two-inputs": { displayName: "Daterange With Two Inputs", parentName: "Daterange" },
     "daterange-formatter-sample": { displayName: "Daterange formatter", parentName: "Daterange" },
     "monthpicker-sample-1": { displayName: "Default Month Picker", parentName: "Monthpicker" },
     "monthpicker-sample-2": { displayName: "Month Picker with Format Options", parentName: "Monthpicker" },

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

@@ -20,8 +20,10 @@ import { DatepickerSample5Component } from "./datepicker/datepicker-sample-5/dat
 import { DatepickerSample6Component } from "./datepicker/datepicker-sample-6/datepicker-sample-6.component";
 import { DatepickerSample7Component } from "./datepicker/datepicker-sample-7/datepicker-sample-7.component";
 import { DatepickerSample8Component } from "./datepicker/datepicker-sample-8/datepicker-sample-8.component";
+// tslint:disable-next-line:max-line-length
 import { DateRangeFormatterSampleComponent } from "./daterange/date-range-formatter/daterange-formatter-sample.component";
 import { DateRangeSampleComponent } from "./daterange/simple-date-range/daterange-sample.component";
+import { DateRangeTwoInputsComponent } from "./daterange/date-range-two-inputs/daterange-two-inputs.component";
 import { MonthpickerSample1Component } from "./monthpicker/monthpicker-sample-1/monthpicker-sample-1.component";
 import { MonthpickerSample2Component } from "./monthpicker/monthpicker-sample-2/monthpicker-sample-2.component";
 import { MonthpickerSample3Component } from "./monthpicker/monthpicker-sample-3/monthpicker-sample-3.component";
@@ -126,6 +128,11 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData["datepicker-sample-8"],
         path: "datepicker-sample-8"
     },
+    {
+        component: DatepickerDropdownComponent,
+        data: schedulingRoutesData["datepicker-dropdown"],
+        path: "datepicker-dropdown"
+    },
     {
         component: DateRangeFormatterSampleComponent,
         data: schedulingRoutesData["daterange-formatter-sample"],
@@ -137,9 +144,9 @@ export const schedulingRoutes: Routes = [
         path: "daterange-sample"
     },
     {
-        component: DatepickerDropdownComponent,
-        data: schedulingRoutesData["datepicker-dropdown"],
-        path: "datepicker-dropdown"
+        component: DateRangeTwoInputsComponent,
+        data: schedulingRoutesData["daterange-two-inputs"],
+        path: "daterange-two-inputs"
     },
     {
         component: TimePickerSample1Component,

src/app/scheduling/scheduling.module.ts

@@ -28,6 +28,7 @@ import { DatepickerSample7Component } from "./datepicker/datepicker-sample-7/dat
 import { DatepickerSample8Component } from "./datepicker/datepicker-sample-8/datepicker-sample-8.component";
 import { DateRangeFormatterSampleComponent } from "./daterange/date-range-formatter/daterange-formatter-sample.component";
 import { DateRangeSampleComponent } from "./daterange/simple-date-range/daterange-sample.component";
+import { DateRangeTwoInputsComponent } from "./daterange/date-range-two-inputs/daterange-two-inputs.component";
 import { MonthpickerSample1Component } from "./monthpicker/monthpicker-sample-1/monthpicker-sample-1.component";
 import { MonthpickerSample2Component } from "./monthpicker/monthpicker-sample-2/monthpicker-sample-2.component";
 import { MonthpickerSample3Component } from "./monthpicker/monthpicker-sample-3/monthpicker-sample-3.component";
@@ -65,6 +66,7 @@ import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/tim
         DatepickerDropdownComponent,
         DateRangeFormatterSampleComponent,
         DateRangeSampleComponent,
+        DateRangeTwoInputsComponent,
         TimePickerSample1Component,
         TimePickerSample2Component,
         TimePickerSample3Component,