docs(date-picker): Updated samples

live-editing/configs/DatePickerConfigGenerator.ts

@@ -9,6 +9,7 @@ import { DatepickerSample4Component } from "../../src/app/scheduling/datepicker/
 import { DatepickerSample5Component } from "../../src/app/scheduling/datepicker/datepicker-sample-5/datepicker-sample-5.component";
 import { DatepickerSample6Component } from "../../src/app/scheduling/datepicker/datepicker-sample-6/datepicker-sample-6.component";
 import { DatepickerSample7Component } from "../../src/app/scheduling/datepicker/datepicker-sample-7/datepicker-sample-7.component";
+import { DatepickerSample8Component } from "../../src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -103,6 +104,16 @@ export class DatePickerConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: DatepickerSample8Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxDatePickerModule, DatepickerSample8Component, IgxIconModule,
+                    IgxInputGroupModule],
+                ngDeclarations: [DatepickerSample8Component],
+                ngImports: [IgxDatePickerModule, IgxIconModule, IgxInputGroupModule]
+            })
+        }));
+
         return configs;
     }
 }

live-editing/configs/TimePickerConfigGenerator.ts

@@ -8,6 +8,8 @@ import { TimePickerSample3Component } from "../../src/app/scheduling/timepicker/
 import { TimePickerSample4Component } from "../../src/app/scheduling/timepicker/timepicker-sample-4/timepicker-sample-4.component";
 import { TimePickerSample5Component } from "../../src/app/scheduling/timepicker/timepicker-sample-5/timepicker-sample-5.component";
 import { TimePickerSample6Component } from "../../src/app/scheduling/timepicker/timepicker-sample-6/timepicker-sample-6.component";
+import { TimePickerSample7Component } from "../../src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component";
+import { TimePickerSample8Component } from "../../src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -95,6 +97,26 @@ export class TimePickerConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/scheduling/timepicker/"
         }));
 
+        configs.push(new Config({
+            component: TimePickerSample7Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule, TimePickerSample7Component],
+                ngDeclarations: [TimePickerSample7Component],
+                ngImports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule]
+            }),
+            shortenComponentPathBy: "/scheduling/timepicker/"
+        }));
+
+        configs.push(new Config({
+            component: TimePickerSample8Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule, TimePickerSample8Component],
+                ngDeclarations: [TimePickerSample8Component],
+                ngImports: [IgxTimePickerModule, IgxInputGroupModule, IgxIconModule]
+            }),
+            shortenComponentPathBy: "/scheduling/timepicker/"
+        }));
+
         return configs;
     }
 }

src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.html

@@ -1,8 +1,17 @@
 <div class="sample-wrapper date-picker-wrapper">
     <h4 class="sample-title">Date Picker with buttons</h4>
     <p class="sample-description">Today and cancel buttons are shown. Two-way data binding is used.</p>
-    <div>
-        <igx-date-picker id="date-picker" cancelButtonLabel="cancel" todayButtonLabel="today" [(ngModel)]="date">
-        </igx-date-picker>
+    <div class="container">
+        <div class="group">
+            <label for="dialogPicker">Dialog Mode</label>
+            <igx-date-picker id="dialogPicker" cancelButtonLabel="close" todayButtonLabel="today" [(ngModel)]="date1">
+            </igx-date-picker>
+        </div>
+        <div class="group">
+            <label for="dropdownPicker">Drop Down Mode</label>
+            <igx-date-picker id="dropdownPicker" mode="dropdown" cancelButtonLabel="close" todayButtonLabel="today"
+                [(ngModel)]="date2">
+            </igx-date-picker>
+        </div>
     </div>
 </div>

src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.scss

@@ -1,3 +1,15 @@
 .date-picker-wrapper {
   padding: 1rem;
 }
+
+.container{
+    display: flex; 
+    flex-flow: row; 
+    width: 100%;
+    align-content:stretch;
+}
+
+.group{
+    padding: 10px;
+    width: 100%;
+}

src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.ts

@@ -1,19 +1,20 @@
 import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: "app-datepicker-sample-3",
-  styleUrls: ["./datepicker-sample-3.component.scss"],
-  templateUrl: "./datepicker-sample-3.component.html"
+    selector: "app-datepicker-sample-3",
+    styleUrls: ["./datepicker-sample-3.component.scss"],
+    templateUrl: "./datepicker-sample-3.component.html"
 })
 export class DatepickerSample3Component implements OnInit {
 
-  public date: Date;
+    public date1 = new Date();
+    public date2 = new Date();
 
-  constructor() { }
+    constructor() { }
 
-  public ngOnInit() {
-    this.date = new Date(Date.now());
-    // setting to yesterday
-    this.date.setDate(this.date.getDate() - 1);
-  }
+    public ngOnInit() {
+        // setting to yesterday
+        this.date1.setDate(this.date1.getDate() - 1);
+        this.date2.setDate(this.date2.getDate() - 1);
+    }
 }

src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html

@@ -0,0 +1,12 @@
+<div class="sample-wrapper date-picker-wrapper">
+    <h4 class="sample-title">Date Picker with custom action buttons</h4>
+    <p class="sample-description">Retemplated date picker with custom buttons for months and years view</p>
+    <igx-date-picker mode="dropdown" #picker [(ngModel)]="date">
+        <ng-template igxDatePickerActions>
+            <div class="container action-buttons">
+                <button igxButton="flat" (click)="monthsView(picker)">months view</button>
+                <button igxButton="flat" (click)="yearsView(picker)">years view</button>
+            </div>
+        </ng-template>
+    </igx-date-picker>
+</div>

src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss

@@ -0,0 +1,22 @@
+$margin:  8px 8px 8px 0px;
+$actions-height: 52px;
+
+.date-picker-wrapper {
+    padding: 1rem;
+    overflow: hidden;
+}
+
+.container{
+    display: flex; flex-direction: row;
+    margin-left: 24px;
+}
+
+.action-buttons {
+    justify-content: flex-end;
+    align-items: center;
+    height: $actions-height;
+
+    [igxButton] {
+        margin: $margin;
+    }
+}

src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+import { IgxDatePickerComponent } from "igniteui-angular";
+
+@Component({
+    selector: "app-datepicker-sample-8",
+    styleUrls: ["./datepicker-sample-8.component.scss"],
+    templateUrl: "./datepicker-sample-8.component.html"
+})
+
+export class DatepickerSample8Component {
+    public date = new Date();
+    public monthsView(datePicker: IgxDatePickerComponent) {
+        datePicker.calendar.activeViewYear();
+    }
+
+    public yearsView(datePicker: IgxDatePickerComponent) {
+        datePicker.calendar.activeViewDecade();
+    }
+}

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

@@ -15,6 +15,7 @@ export const schedulingRoutesData = {
     "datepicker-sample-5": { displayName: "Datepicker Locales", parentName: "Datepicker" },
     "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" },
     "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" },
@@ -24,5 +25,7 @@ export const schedulingRoutesData = {
     "timepicker-sample-3": { displayName: "Timepicker Delta and Spin Mode", parentName: "Timepicker" },
     "timepicker-sample-4": { displayName: "Timepicker Validation", parentName: "Timepicker" },
     "timepicker-sample-5": { displayName: "Timepicker Input Group Template", parentName: "Timepicker" },
-    "timepicker-sample-6": { displayName: "Timepicker Input Group Template Dropdown", parentName: "Timepicker" }
+    "timepicker-sample-6": { displayName: "Timepicker Input Group Template Dropdown", parentName: "Timepicker" },
+    "timepicker-sample-7": { displayName: "Custom Action Buttons", parentName: "Timepicker" },
+    "timepicker-sample-8": { displayName: "Timepicker Format", parentName: "Timepicker" }
 };

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

@@ -17,6 +17,7 @@ import { DatepickerSample4Component } from "./datepicker/datepicker-sample-4/dat
 import { DatepickerSample5Component } from "./datepicker/datepicker-sample-5/datepicker-sample-5.component";
 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 { 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";
@@ -28,6 +29,8 @@ import { TimePickerSample3Component } from "./timepicker/timepicker-sample-3/tim
 import { TimePickerSample4Component } from "./timepicker/timepicker-sample-4/timepicker-sample-4.component";
 import { TimePickerSample5Component } from "./timepicker/timepicker-sample-5/timepicker-sample-5.component";
 import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/timepicker-sample-6.component";
+import { TimePickerSample7Component } from "./timepicker/timepicker-sample-7/timepicker-sample-7.component";
+import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/timepicker-sample-8.component";
 
 export const schedulingRoutes: Routes = [
     {
@@ -109,6 +112,11 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData["datepicker-sample-7"],
         path: "datepicker-sample-7"
     },
+    {
+        component: DatepickerSample8Component,
+        data: schedulingRoutesData["datepicker-sample-8"],
+        path: "datepicker-sample-8"
+    },
     {
         component: DatepickerDropdownComponent,
         data: schedulingRoutesData["datepicker-dropdown"],
@@ -149,6 +157,16 @@ export const schedulingRoutes: Routes = [
         data: schedulingRoutesData["timepicker-dropdown"],
         path: "timepicker-dropdown"
     },
+    {
+        component: TimePickerSample7Component,
+        data: schedulingRoutesData["timepicker-sample-7"],
+        path: "timepicker-sample-7"
+    },
+    {
+        component: TimePickerSample8Component,
+        data: schedulingRoutesData["timepicker-sample-8"],
+        path: "timepicker-sample-8"
+    },
     {
         component: MonthpickerSample1Component,
         data: schedulingRoutesData["monthpicker-sample-1"],

src/app/scheduling/scheduling.module.ts

@@ -23,6 +23,7 @@ import { DatepickerSample4Component } from "./datepicker/datepicker-sample-4/dat
 import { DatepickerSample5Component } from "./datepicker/datepicker-sample-5/datepicker-sample-5.component";
 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 { 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";
@@ -34,6 +35,8 @@ import { TimePickerSample3Component } from "./timepicker/timepicker-sample-3/tim
 import { TimePickerSample4Component } from "./timepicker/timepicker-sample-4/timepicker-sample-4.component";
 import { TimePickerSample5Component } from "./timepicker/timepicker-sample-5/timepicker-sample-5.component";
 import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/timepicker-sample-6.component";
+import { TimePickerSample7Component } from "./timepicker/timepicker-sample-7/timepicker-sample-7.component";
+import { TimePickerSample8Component } from "./timepicker/timepicker-sample-8/timepicker-sample-8.component";
 
 @NgModule({
     declarations: [
@@ -52,13 +55,16 @@ import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/tim
         DatepickerSample5Component,
         DatepickerSample6Component,
         DatepickerSample7Component,
+        DatepickerSample8Component,
         DatepickerDropdownComponent,
         TimePickerSample1Component,
         TimePickerSample2Component,
         TimePickerSample3Component,
         TimePickerSample4Component,
         TimePickerSample5Component,
         TimePickerSample6Component,
+        TimePickerSample7Component,
+        TimePickerSample8Component,
         DatepickerDropdownComponent,
         TimepickerDropdownComponent,
         CalendarViewsComponent,

src/app/scheduling/timepicker/timepicker-sample-6/timepicker-sample-6.component.html

@@ -9,7 +9,7 @@ <h5 class="sample-title">Time Picker with retemplated Input Group - dropdown mod
                     <igx-icon (click)="openDialog()">access_time</igx-icon>
                 </igx-suffix>
             </igx-input-group>
-            <label>{{today}}</label>
+            <label>{{value}}</label>
         </ng-template>
     </igx-time-picker>
 </div>

src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.html

@@ -0,0 +1,12 @@
+<h5 class="sample-title">Time Picker with custom action buttons</h5>
+<div class="time-width">
+    <igx-time-picker #picker format="HH:mm" mode="dropdown">
+        <ng-template igxTimePickerActions>
+            <div class="container action-buttons">
+                <button igxButton="flat" (click)="picker.cancelButtonClick()">cancel</button>
+                <button igxButton="flat" (click)="picker.okButtonClick()">ok</button>
+                <button igxButton="flat" (click)="selectNow(picker)">now</button>
+            </div>
+        </ng-template>
+    </igx-time-picker>
+</div>

src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.scss

@@ -0,0 +1,17 @@
+$margin:  8px 8px 8px 0px;
+$actions-height: 52px;
+
+.container{
+    display: flex; flex-direction: row;
+    margin-left: 24px;
+}
+
+.action-buttons {
+    justify-content: flex-end;
+    align-items: center;
+    height: $actions-height;
+
+    [igxButton] {
+        margin: $margin;
+    }
+}

src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+import { IgxTimePickerComponent } from "igniteui-angular";
+
+@Component({
+    selector: "app-timepicker-sample-7",
+    styleUrls: ["./timepicker-sample-7.component.scss"],
+    templateUrl: "./timepicker-sample-7.component.html"
+})
+export class TimePickerSample7Component {
+    public selectNow(timePicker: IgxTimePickerComponent) {
+        timePicker.value = new Date(Date.now());
+        timePicker.close();
+    }
+}

src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.html

@@ -0,0 +1,15 @@
+<h5 class="sample-title">Different time formats</h5>
+<div class="container">
+    <div class="group">
+        <label for="timepicker1">h:m tt</label>
+        <igx-time-picker id="timepicker1" format="h:m tt" mode="dropdown" [(ngModel)]="date"></igx-time-picker>
+    </div>
+    <div class="group">
+        <label for="timepicker2">HH:mm</label>
+        <igx-time-picker id="timepicker2" format="HH:mm" mode="dropdown" [(ngModel)]="date"></igx-time-picker>
+    </div>
+    <div class="group">
+        <label for="timepicker3">hh tt</label>
+        <igx-time-picker id="timepicker3" format="hh tt" mode="dropdown" [(ngModel)]="date"></igx-time-picker>
+    </div>
+</div>

src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.scss

@@ -0,0 +1,11 @@
+.container{
+    display: flex; 
+    flex-flow: row; 
+    width: 100%;
+    align-content:stretch;
+}
+
+.group{
+    padding: 10px;
+    width: 100%;
+}

src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "app-timepicker-sample-8",
+    styleUrls: ["./timepicker-sample-8.component.scss"],
+    templateUrl: "./timepicker-sample-8.component.html"
+})
+export class TimePickerSample8Component {
+    public date: Date;
+    constructor() {
+        this.date = new Date();
+        this.date.setHours(19);
+        this.date.setMinutes(5);
+    }
+}