feat(date-range): add a dev sample #5732

src/app/app.component.ts

@@ -384,6 +384,11 @@ export class AppComponent implements OnInit {
             link: '/treeGridLoadOnDemand',
             icon: 'view_column',
             name: 'Tree Grid Load On Demand'
+        },
+        {
+            link: '/dateRange',
+            icon: 'date_range',
+            name: 'DateRange'
         }
     ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
 

src/app/app.module.ts

@@ -112,6 +112,7 @@ import { GridFlexSampleComponent } from './grid-flex-layout/grid-flex.sample';
 import { GridEsfLoadOnDemandComponent } from './grid-esf-load-on-demand/grid-esf-load-on-demand.component';
 import { GridFilteringComponent } from './grid-filtering/grid-filtering.sample';
 import { GridExternalFilteringComponent } from './grid-external-filtering/grid-external-filtering.sample';
+import { DateRangeSampleComponent } from './date-range/date-range.sample';
 
 
 
@@ -216,7 +217,8 @@ const components = [
     GridFlexSampleComponent,
     GridEsfLoadOnDemandComponent,
     GridFilteringComponent,
-    GridExternalFilteringComponent
+    GridExternalFilteringComponent,
+    DateRangeSampleComponent
 ];
 
 @NgModule({

src/app/date-range/date-range.sample.html

@@ -0,0 +1,67 @@
+<div class="content-wrap">
+    <form class="book-room-form" [formGroup]="form" (ngSubmit)="onSubmit()">
+        <div class="container">
+            <h4 class="title">Book your room</h4>
+            <igx-input-group>
+                <input #fullName igxInput type="text" formControlName="fullName">
+                <label for="fullName" igxLabel>Full Name</label>
+                <igx-suffix>
+                    <igx-icon>person</igx-icon>
+                </igx-suffix>
+            </igx-input-group>
+            <igx-input-group>
+                <input #phone igxInput type="number" formControlName="phone">
+                <label for="phone" igxLabel>Phone</label>
+                <igx-suffix>
+                    <igx-icon>phone</igx-icon>
+                </igx-suffix>
+            </igx-input-group>
+            <igx-input-group>
+                <input #email igxInput type="email" formControlName="email">
+                <label for="email" igxLabel>Email</label>
+                <igx-suffix>
+                    <igx-icon>email</igx-icon>
+                </igx-suffix>
+            </igx-input-group>
+
+            <div class="date-range-wrapper">
+                <div *ngIf="!showSingleInput; else singleInput">
+                    <igx-date-range [weekStart]="1" [monthsViewNumber]="1" [hideOutsideDays]="true" [mode]="'dropdown'">
+                        <igx-input-group>
+                            <input #startDate igxDateRangeStart igxInput formControlName="startDate" type="text">
+                            <label for="startDate" igxLabel>Check-in Date</label>
+                            <igx-prefix>
+                                <igx-icon>today</igx-icon>
+                            </igx-prefix>
+                        </igx-input-group>
+                        <igx-input-group>
+                            <input #endDate igxDateRangeEnd igxInput formControlName="endDate" type="text">
+                            <label for="endDate" igxLabel>Check-out Date</label>
+                            <igx-prefix>
+                                <igx-icon>today</igx-icon>
+                            </igx-prefix>
+                        </igx-input-group>
+                    </igx-date-range>
+                </div>
+            </div>
+
+            <ng-template #singleInput>
+                <igx-date-range [formatter]="formatter" [mode]="'dropdown'">
+                    <igx-input-group>
+                        <input #singleInput igxInput igxDateRange type="text" formControlName="fullRange">
+                        <label igxLabel for="singleInput">Input Date</label>
+                        <igx-prefix>
+                            <igx-icon>today</igx-icon>
+                        </igx-prefix>
+                    </igx-input-group>
+                </igx-date-range>
+            </ng-template>
+
+            <div class="button-wrap">
+                <button igxButton>Submit Form</button>
+                <button igxButton (click)="selectDateRange()"> Select Range </button>
+            </div>
+        </div>
+    </form>
+    <button igxButton (click)="toggleSingleInputDisplay()">Toggle Single Input</button>
+</div>

src/app/date-range/date-range.sample.scss

@@ -0,0 +1,33 @@
+.content-wrap {
+    margin: 32px;
+}
+
+.container > * {
+  margin-top: 32px;
+}
+
+.book-room-form {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  padding: 24px;
+  max-width: 500px;
+  margin-bottom: 48px;
+  max-width: 400px;
+  display: flex;
+  flex-flow: column;
+}
+
+.date-range-wrapper {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}
+
+.button-wrap {
+  display: flex;
+  justify-content: space-between;
+}
+
+.twoInputWrap {
+  display: flex;
+  justify-content: space-between;
+}

src/app/date-range/date-range.sample.ts

@@ -0,0 +1,50 @@
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { IgxDateRangeComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-date-range',
+    templateUrl: './date-range.sample.html',
+    styleUrls: ['./date-range.sample.scss']
+})
+export class DateRangeSampleComponent implements OnInit {
+    @ViewChild(IgxDateRangeComponent, { read: IgxDateRangeComponent, static: false })
+    public dateRange: IgxDateRangeComponent;
+    public date: Date = new Date(Date.now());
+    public form: FormGroup;
+    public showSingleInput: boolean;
+
+    private dayFormatter = new Intl.DateTimeFormat('en', { weekday: 'long' });
+    private monthFormatter = new Intl.DateTimeFormat('en', { month: 'long' });
+
+    constructor(private fb: FormBuilder) { }
+
+    public ngOnInit(): void {
+        this.form = this.fb.group({
+            fullName: [''],
+            phone: [''],
+            email: [''],
+            startDate: [''],
+            endDate: [''],
+            fullRange: ['']
+        });
+    }
+
+    public onSubmit(): void {
+        console.log(this.form);
+    }
+
+    public selectDateRange(): void {
+        const today = new Date();
+        const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
+        this.dateRange.selectRange(today, inFiveDays);
+    }
+
+    public formatter = (date: Date) => {
+        return `${this.dayFormatter.format(date)}, ${date.getDate()} ${this.monthFormatter.format(date)}, ${date.getFullYear()}`;
+    }
+
+    public toggleSingleInputDisplay(): void {
+        this.showSingleInput = !this.showSingleInput;
+    }
+}

src/app/routing.ts

@@ -89,6 +89,7 @@ import { GridFlexSampleComponent } from './grid-flex-layout/grid-flex.sample';
 import { GridEsfLoadOnDemandComponent } from './grid-esf-load-on-demand/grid-esf-load-on-demand.component';
 import { GridFilteringComponent } from './grid-filtering/grid-filtering.sample';
 import { GridExternalFilteringComponent } from './grid-external-filtering/grid-external-filtering.sample';
+import { DateRangeSampleComponent } from './date-range/date-range.sample';
 
 const appRoutes = [
     {
@@ -437,6 +438,10 @@ const appRoutes = [
     {
         path: 'gridExternalFiltering',
         component: GridExternalFilteringComponent
+    },
+    {
+        path: 'dateRange',
+        component: DateRangeSampleComponent
     }
 ];
 

src/app/shared/shared.module.ts

@@ -37,7 +37,8 @@ import {
     IgxToastModule,
     IgxToggleModule,
     IgxTooltipModule,
-    IgxSelectModule
+    IgxSelectModule,
+    IgxDateRangeModule
 } from 'igniteui-angular';
 
 
@@ -79,7 +80,8 @@ const igniteModules = [
     IgxToastModule,
     IgxToggleModule,
     IgxTooltipModule,
-    IgxSelectModule
+    IgxSelectModule,
+    IgxDateRangeModule
 ];
 
 @NgModule({