fix(range-date-picker): validation sample #1574

Author: Lipata

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

@@ -1,21 +1,37 @@
 <div class="date-range-picker-wrapper">
-    <igx-date-range-picker [(ngModel)]="range" required>
+    <igx-date-range-picker [(ngModel)]="rangeSingle" required>
         <label igxLabel>Period</label>
     </igx-date-range-picker>
 </div>
 
+<div class="date-range-picker-wrapper">
+    <igx-date-range-picker [(ngModel)]="rangeSeparate" required>
+        <igx-date-range-start>
+            <igx-picker-toggle igxPrefix>
+                <igx-icon>calendar_today</igx-icon>
+            </igx-picker-toggle>
+            <label igxLabel>Start Date</label>
+            <input igxInput igxDateTimeEditor type="text">
+        </igx-date-range-start>
+        <igx-date-range-end>
+            <label igxLabel>End Date</label>
+            <input igxInput igxDateTimeEditor type="text">
+        </igx-date-range-end>
+    </igx-date-range-picker>
+</div>
+
 <div class="date-range-picker-wrapper">
     <igx-date-range-picker>
         <igx-date-range-start>
             <igx-picker-toggle igxPrefix>
                 <igx-icon>calendar_today</igx-icon>
             </igx-picker-toggle>
             <label igxLabel>Start Date</label>
-            <input igxInput igxDateTimeEditor [(ngModel)]="range.start" type="text" required>
+            <input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
         </igx-date-range-start>
         <igx-date-range-end>
             <label igxLabel>End Date</label>
-            <input igxInput igxDateTimeEditor [(ngModel)]="range.end" type="text" required>
+            <input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
         </igx-date-range-end>
     </igx-date-range-picker>
 </div>

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

@@ -7,5 +7,8 @@ import { DateRange } from "igniteui-angular";
     templateUrl: "./daterangepicker-validation.html"
 })
 export class DateRangePickerValidationComponent {
-    public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
+    public rangeSingle: DateRange;
+    public rangeSeparate: DateRange;
+    public startDate: Date;
+    public endDate: Date;
 }