Add Datepicker demo

src/app/form-control-demo/datepicker-demo/datepicker-demo.component.html

@@ -0,0 +1,40 @@
+<md-card>
+    <md-card-header>
+        <md-card-title>Standard</md-card-title>
+    </md-card-header>
+    <md-card-content>
+        <md-input-container>
+            <input mdInput [mdDatepicker]="picker1" placeholder="Choose a date">
+            <button mdSuffix [mdDatepickerToggle]="picker1"></button>
+        </md-input-container>
+        <md-datepicker #picker1></md-datepicker>
+    </md-card-content>
+</md-card>
+<br />
+<md-card>
+    <md-card-header>
+        <md-card-title>startView = "Year"</md-card-title>
+    </md-card-header>
+    <md-card-content>
+        <md-input-container>
+            <input mdInput [mdDatepicker]="picker2" placeholder="Choose a date">
+            <button mdSuffix [mdDatepickerToggle]="picker2"></button>
+        </md-input-container>
+        <md-datepicker startView="year" #picker2></md-datepicker>
+    </md-card-content>
+</md-card>
+<br />
+<md-card>
+    <md-card-header>
+        <md-card-title>With default value</md-card-title>
+    </md-card-header>
+    <md-card-content>
+        <md-input-container>
+            <input mdInput [mdDatepicker]="picker3" [value]="defaultDate" placeholder="Choose a date">
+            <button mdSuffix [mdDatepickerToggle]="picker3"></button>
+        </md-input-container>
+        <md-datepicker #picker3></md-datepicker>
+        <br />
+        <button md-raised-button color="primary" (click)="toggleDatepicker()">Toggle Datepicker</button>
+    </md-card-content>
+</md-card>

src/app/form-control-demo/datepicker-demo/datepicker-demo.component.ts

@@ -0,0 +1,29 @@
+import {
+    Component,
+    OnInit,
+    ViewChild,
+}                           from '@angular/core';
+import { MdDatepicker }     from '@angular/material';
+
+import { ToolbarService }   from 'ng2-cbp-cf';
+
+@Component({
+    templateUrl: 'datepicker-demo.component.html',
+})
+
+export class DatepickerDemoComponent implements OnInit {
+    @ViewChild('picker3') datepicker3: MdDatepicker<Date>;
+
+    defaultDate: Date = new Date();
+
+    constructor(private _toolbarService: ToolbarService) {
+    }
+
+    ngOnInit(): void {
+        this._toolbarService.setTitle('Form Controls - Date Picker');
+    }
+
+    toggleDatepicker(): void {
+        this.datepicker3.opened ? this.datepicker3.close() : this.datepicker3.open();
+    }
+}

src/app/form-control-demo/datepicker-demo/index.ts

@@ -0,0 +1 @@
+export * from './datepicker-demo.component';

src/app/form-control-demo/form-control-demo.module.ts

@@ -5,8 +5,12 @@ import {
 import { FormsModule }                  from '@angular/forms';
 import {
     MdButtonModule,
+    MdCardModule,
+    MdDatepickerModule,
     MdDialogModule,
     MdIconModule,
+    MdInputModule,
+    MdNativeDateModule,
 }                                       from '@angular/material';
 import { BrowserModule }                from '@angular/platform-browser';
 
@@ -18,6 +22,7 @@ import {
 
 import { BadgeDemoComponent }           from './badge-demo';
 import { CheckboxDemoComponent }        from './checkbox-demo';
+import { DatepickerDemoComponent }        from './datepicker-demo';
 import {
     DropdownTreeDemoComponent,
     DropdownTreeDemoService,
@@ -32,13 +37,18 @@ import { formControlDemoRouting }       from './form-control-demo.routing';
         CheckboxModule,
         DropdownTreeFieldModule,
         MdButtonModule,
+        MdCardModule,
+        MdDatepickerModule,
         MdDialogModule,
         MdIconModule,
+        MdInputModule,
+        MdNativeDateModule,
         formControlDemoRouting,
     ],
     declarations: [
         BadgeDemoComponent,
         CheckboxDemoComponent,
+        DatepickerDemoComponent,
         DropdownTreeDemoComponent,
     ],
     providers: [

src/app/form-control-demo/form-control-demo.routing.ts

@@ -6,11 +6,13 @@ import {
 
 import { BadgeDemoComponent }           from './badge-demo';
 import { CheckboxDemoComponent }        from './checkbox-demo';
+import { DatepickerDemoComponent }      from './datepicker-demo';
 import { DropdownTreeDemoComponent }    from './dropdown-tree-demo';
 
 const formControlDemoRoutes: Routes = [
      { path: 'form-control-demo/badge-demo', component: BadgeDemoComponent },
      { path: 'form-control-demo/checkbox-demo', component: CheckboxDemoComponent },
+     { path: 'form-control-demo/datepicker-demo', component: DatepickerDemoComponent },
      { path: 'form-control-demo/dropdown-tree-demo', component: DropdownTreeDemoComponent },
 ];
 

src/app/form-control-demo/index.ts

@@ -1,5 +1,6 @@
 export * from './badge-demo';
-export * from './dropdown-tree-demo';
 export * from './checkbox-demo';
+export * from './datepicker-demo';
+export * from './dropdown-tree-demo';
 
 export * from './form-control-demo.module';

src/app/icons/icons.component.html

@@ -1,6 +1,3 @@
-<div>
-    <h4> <a href="https://material.io/icons/">Material Design Icons - Guidelines</a></h4>
-</div>
 <md-card>
     <md-card-content>
         <md-grid-list cols="4" rowHeight="50px" *ngFor="let icon of iconList" style="width: 80%">

src/app/icons/icons.component.ts

@@ -1,11 +1,21 @@
-import { Component } from '@angular/core';
+import {
+    Component,
+    OnInit,
+}                           from '@angular/core';
+import { ToolbarService }   from 'ng2-cbp-cf';
 
 @Component({
     templateUrl: 'icons.component.html',
     styleUrls: ['icons.component.scss'],
 })
 
-export class IconsComponent {
+export class IconsComponent implements OnInit {
+    constructor(private _toolbarService: ToolbarService) {
+    }
+
+    ngOnInit(): void {
+        this._toolbarService.setTitle('Material Design Icons - Guidelines');
+    }
 
     public iconList: any[] = [
         { icon: 'menu', name: 'Menu', description: 'Open and Close side nav' },
@@ -30,7 +40,4 @@ export class IconsComponent {
         { icon: 'attach_file', name: 'Attachment', description: 'Uploading a document' },
         { icon: 'file_download', name: 'Download', description: 'Open document' },
     ];
-
-    constructor() {
-    }
 }

src/app/shared/mock-data.ts

@@ -100,7 +100,7 @@ export class MockData {
                     {
                         "html": "Date Picker/Range",
                         "type": "route",
-                        "url": "#"
+                        "url": "form-control-demo/datepicker-demo"
                     },
                     {
                         "html": "Dropdown Tree",