From 1c5c712003d0767cb7d9deec22378995a72f2a1a Mon Sep 17 00:00:00 2001
From: Svetla Boykova <sboykova@infragistics.com>
Date: Mon, 10 Jun 2019 18:46:35 +0300
Subject: [PATCH 1/2] docs(date-picker): Updated samples #4647

---
 .../configs/DatePickerConfigGenerator.ts      | 11 ++++++++++
 .../datepicker-sample-3.component.html        | 15 ++++++++++---
 .../datepicker-sample-3.component.scss        | 12 +++++++++++
 .../datepicker-sample-3.component.ts          | 21 ++++++++++---------
 .../datepicker-sample-8.component.html        |  8 +++++++
 .../datepicker-sample-8.component.scss        | 17 +++++++++++++++
 .../datepicker-sample-8.component.ts          | 19 +++++++++++++++++
 src/app/scheduling/scheduling-routes-data.ts  |  1 +
 .../scheduling/scheduling-routing.module.ts   |  6 ++++++
 src/app/scheduling/scheduling.module.ts       |  2 ++
 10 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html
 create mode 100644 src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss
 create mode 100644 src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.ts

diff --git a/live-editing/configs/DatePickerConfigGenerator.ts b/live-editing/configs/DatePickerConfigGenerator.ts
index 68de546403..c856a91f76 100644
--- a/live-editing/configs/DatePickerConfigGenerator.ts
+++ b/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;
     }
 }
diff --git a/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.html b/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.html
index 4ad3f0b409..e596193be0 100644
--- a/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.scss b/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.scss
index 0933a429ee..a1955669fe 100644
--- a/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.scss
+++ b/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%;
+}
\ No newline at end of file
diff --git a/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.ts b/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.ts
index f0e427d6d5..aad4264866 100644
--- a/src/app/scheduling/datepicker/datepicker-sample-3/datepicker-sample-3.component.ts
+++ b/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);
+    }
 }
diff --git a/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html
new file mode 100644
index 0000000000..057b10fc81
--- /dev/null
+++ b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html
@@ -0,0 +1,8 @@
+<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>
\ No newline at end of file
diff --git a/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss
new file mode 100644
index 0000000000..11c79edd79
--- /dev/null
+++ b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.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;
+    }
+}
\ No newline at end of file
diff --git a/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.ts b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.ts
new file mode 100644
index 0000000000..9da196fe10
--- /dev/null
+++ b/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();
+    }
+}
diff --git a/src/app/scheduling/scheduling-routes-data.ts b/src/app/scheduling/scheduling-routes-data.ts
index c1c8092ab8..e75e2e8ead 100644
--- a/src/app/scheduling/scheduling-routes-data.ts
+++ b/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" },
diff --git a/src/app/scheduling/scheduling-routing.module.ts b/src/app/scheduling/scheduling-routing.module.ts
index 32adaea73b..beab38f351 100644
--- a/src/app/scheduling/scheduling-routing.module.ts
+++ b/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";
@@ -109,6 +110,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"],
diff --git a/src/app/scheduling/scheduling.module.ts b/src/app/scheduling/scheduling.module.ts
index bb43795697..a82b9951ce 100644
--- a/src/app/scheduling/scheduling.module.ts
+++ b/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";
@@ -52,6 +53,7 @@ import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/tim
         DatepickerSample5Component,
         DatepickerSample6Component,
         DatepickerSample7Component,
+        DatepickerSample8Component,
         DatepickerDropdownComponent,
         TimePickerSample1Component,
         TimePickerSample2Component,

From 21b450ce9eb54a01efb9869971c9539ac8bce184 Mon Sep 17 00:00:00 2001
From: Svetla Boykova <sboykova@infragistics.com>
Date: Tue, 11 Jun 2019 17:58:30 +0300
Subject: [PATCH 2/2] docs(*): Updates to time and date picker topics #1196

---
 .../configs/TimePickerConfigGenerator.ts      | 22 +++++++++++++++++++
 .../datepicker-sample-8.component.html        | 20 ++++++++++-------
 .../datepicker-sample-8.component.scss        |  5 +++++
 src/app/scheduling/scheduling-routes-data.ts  |  4 +++-
 .../scheduling/scheduling-routing.module.ts   | 12 ++++++++++
 src/app/scheduling/scheduling.module.ts       |  4 ++++
 .../timepicker-sample-6.component.html        |  2 +-
 .../timepicker-sample-7.component.html        | 12 ++++++++++
 .../timepicker-sample-7.component.scss        | 17 ++++++++++++++
 .../timepicker-sample-7.component.ts          | 14 ++++++++++++
 .../timepicker-sample-8.component.html        | 15 +++++++++++++
 .../timepicker-sample-8.component.scss        | 11 ++++++++++
 .../timepicker-sample-8.component.ts          | 15 +++++++++++++
 13 files changed, 143 insertions(+), 10 deletions(-)
 create mode 100644 src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.html
 create mode 100644 src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.scss
 create mode 100644 src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.ts
 create mode 100644 src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.html
 create mode 100644 src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.scss
 create mode 100644 src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.ts

diff --git a/live-editing/configs/TimePickerConfigGenerator.ts b/live-editing/configs/TimePickerConfigGenerator.ts
index ae2e1fe890..29444d311c 100644
--- a/live-editing/configs/TimePickerConfigGenerator.ts
+++ b/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;
     }
 }
diff --git a/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html
index 057b10fc81..fb618f2a2e 100644
--- a/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html
+++ b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.html
@@ -1,8 +1,12 @@
-<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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss
index 11c79edd79..b11dc1fdb8 100644
--- a/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss
+++ b/src/app/scheduling/datepicker/datepicker-sample-8/datepicker-sample-8.component.scss
@@ -1,6 +1,11 @@
 $margin:  8px 8px 8px 0px;
 $actions-height: 52px;
 
+.date-picker-wrapper {
+    padding: 1rem;
+    overflow: hidden;
+}
+
 .container{
     display: flex; flex-direction: row;
     margin-left: 24px;
diff --git a/src/app/scheduling/scheduling-routes-data.ts b/src/app/scheduling/scheduling-routes-data.ts
index e75e2e8ead..ffa2474a2e 100644
--- a/src/app/scheduling/scheduling-routes-data.ts
+++ b/src/app/scheduling/scheduling-routes-data.ts
@@ -25,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" }
 };
diff --git a/src/app/scheduling/scheduling-routing.module.ts b/src/app/scheduling/scheduling-routing.module.ts
index beab38f351..2fd6dbd4e1 100644
--- a/src/app/scheduling/scheduling-routing.module.ts
+++ b/src/app/scheduling/scheduling-routing.module.ts
@@ -29,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 = [
     {
@@ -155,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"],
diff --git a/src/app/scheduling/scheduling.module.ts b/src/app/scheduling/scheduling.module.ts
index a82b9951ce..42942dd272 100644
--- a/src/app/scheduling/scheduling.module.ts
+++ b/src/app/scheduling/scheduling.module.ts
@@ -35,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: [
@@ -61,6 +63,8 @@ import { TimePickerSample6Component } from "./timepicker/timepicker-sample-6/tim
         TimePickerSample4Component,
         TimePickerSample5Component,
         TimePickerSample6Component,
+        TimePickerSample7Component,
+        TimePickerSample8Component,
         DatepickerDropdownComponent,
         TimepickerDropdownComponent,
         CalendarViewsComponent,
diff --git a/src/app/scheduling/timepicker/timepicker-sample-6/timepicker-sample-6.component.html b/src/app/scheduling/timepicker/timepicker-sample-6/timepicker-sample-6.component.html
index 77ab45e3b9..35a74a0536 100644
--- a/src/app/scheduling/timepicker/timepicker-sample-6/timepicker-sample-6.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.html b/src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.html
new file mode 100644
index 0000000000..fc055e6057
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.scss b/src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.scss
new file mode 100644
index 0000000000..11c79edd79
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.ts b/src/app/scheduling/timepicker/timepicker-sample-7/timepicker-sample-7.component.ts
new file mode 100644
index 0000000000..006ccd7946
--- /dev/null
+++ b/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();
+    }
+}
diff --git a/src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.html b/src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.html
new file mode 100644
index 0000000000..4f0cd2f8f9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.scss b/src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.scss
new file mode 100644
index 0000000000..ad9192beac
--- /dev/null
+++ b/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%;
+}
\ No newline at end of file
diff --git a/src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.ts b/src/app/scheduling/timepicker/timepicker-sample-8/timepicker-sample-8.component.ts
new file mode 100644
index 0000000000..f5cdc3f8e0
--- /dev/null
+++ b/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);
+    }
+}