samples(date-range) Create date-range samples #1574

Author: PlamenaMiteva

src/app/scheduling/daterange/date-range-formatter/daterange-formatter-sample.component.html

@@ -0,0 +1,15 @@
+<div class="sample-wrapper date-range-wrapper">
+    <h4 class="sample-title">Custom Format Date Range</h4>
+    <p class="sample-description">Displaying the selected date range in custom format</p>
+    <div>
+        <igx-date-range [formatter]="formatter">
+            <igx-input-group>
+                <input #singleInput igxInput igxDateRange type="text">
+                <label igxLabel for="singleInput">Input 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-formatter/daterange-formatter-sample.component.scss

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

src/app/scheduling/daterange/date-range-formatter/daterange-formatter-sample.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-daterange-sample",
+  styleUrls: ["./daterange-formatter-sample.component.scss"],
+  templateUrl: "./daterange-formatter-sample.component.html"
+})
+export class DateRangeFormatterSampleComponent implements OnInit {
+  private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" });
+  private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" });
+
+  constructor() { }
+
+  public formatter = (date: Date) => {
+    // tslint:disable-next-line:max-line-length
+    return `${this.dayFormatter.format(date)}, ${date.getDate()} ${this.monthFormatter.format(date)}, ${date.getFullYear()}`;
+  }
+
+  public ngOnInit(): void {}
+}

src/app/scheduling/daterange/simple-date-range/daterange-sample.component.html

@@ -0,0 +1,15 @@
+<div class="sample-wrapper date-range-wrapper">
+    <h4 class="sample-title">Default Date Range</h4>
+    <p class="sample-description">Plain date range</p>
+    <div>
+        <igx-date-range [mode]="'dropdown'">
+            <igx-input-group>
+                <input #singleInput igxInput igxDateRange type="text">
+                <label igxLabel for="singleInput">Input Date</label>
+                <igx-prefix>
+                    <igx-icon>today</igx-icon>
+                </igx-prefix>
+            </igx-input-group>
+        </igx-date-range>
+    </div>
+</div>

src/app/scheduling/daterange/simple-date-range/daterange-sample.component.scss

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

src/app/scheduling/daterange/simple-date-range/daterange-sample.component.ts

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

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

@@ -17,6 +17,8 @@ export const schedulingRoutesData = {
     "datepicker-sample-6": { displayName: "Datepicker Input Group Template", parentName: "Datepicker" },
     "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-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" },
     "monthpicker-sample-3": { displayName: "Localized Month Picker", parentName: "Monthpicker" },

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

@@ -20,6 +20,8 @@ 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";
+import { DateRangeFormatterSampleComponent } from "./daterange/date-range-formatter/daterange-formatter-sample.component";
+import { DateRangeSampleComponent } from "./daterange/simple-date-range/daterange-sample.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";
@@ -124,6 +126,16 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData["datepicker-sample-8"],
         path: "datepicker-sample-8"
     },
+    {
+        component: DateRangeFormatterSampleComponent,
+        data: schedulingRoutesData["daterange-formatter-sample"],
+        path: "daterange-formatter-sample"
+    },
+    {
+        component: DateRangeSampleComponent,
+        data: schedulingRoutesData["daterange-sample"],
+        path: "daterange-sample"
+    },
     {
         component: DatepickerDropdownComponent,
         data: schedulingRoutesData["datepicker-dropdown"],

src/app/scheduling/scheduling.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import {
-    IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule, IgxDialogModule, IgxIconModule,
-    IgxInputGroupModule, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule,
+    IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule, IgxDateRangeModule, IgxDialogModule,
+    IgxIconModule, IgxInputGroupModule, IgxSelectModule, IgxSnackbarModule, IgxSwitchModule,
     IgxTimePickerModule, IgxToastModule
 } from "igniteui-angular";
 import { CalendarSample1Component } from "./calendar/calendar-sample-1/calendar-sample-1.component";
@@ -26,6 +26,8 @@ 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";
+import { DateRangeFormatterSampleComponent } from "./daterange/date-range-formatter/daterange-formatter-sample.component";
+import { DateRangeSampleComponent } from "./daterange/simple-date-range/daterange-sample.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";
@@ -61,6 +63,8 @@ import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/tim
         DatepickerSample7Component,
         DatepickerSample8Component,
         DatepickerDropdownComponent,
+        DateRangeFormatterSampleComponent,
+        DateRangeSampleComponent,
         TimePickerSample1Component,
         TimePickerSample2Component,
         TimePickerSample3Component,
@@ -83,6 +87,7 @@ import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/tim
         IgxCalendarModule,
         IgxCardModule,
         IgxDatePickerModule,
+        IgxDateRangeModule,
         IgxDialogModule,
         IgxIconModule,
         IgxInputGroupModule,