Datepicker calendar

src/app/components/datepicker/datepicker-demo.component.html

@@ -0,0 +1,13 @@
+
+<div style="display: inline-block">
+  <sky-datepicker-calendar
+    [minDate]="minDate"
+    [maxDate]="maxDate"
+    [selectedDate]="selectedDate"
+    (selectedDateChange)="selectedDate = $event"
+    [startingDay]="startingDay">
+  </sky-datepicker-calendar>
+</div>
+<div>
+  Selected date is {{selectedDate}}
+</div>

src/app/components/datepicker/datepicker-demo.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-datepicker-demo',
+  templateUrl: './datepicker-demo.component.html'
+})
+export class SkyDatepickerDemoComponent {
+
+  public minDate: Date;
+
+  public maxDate: Date;
+
+  public selectedDate: Date = new Date('4/4/2017');
+
+  public startingDay: number = 0;
+}

src/app/components/datepicker/index.html

@@ -0,0 +1,44 @@
+<sky-demo-page title="Datepicker">
+  <sky-demo-page-summary>
+    The datepicker module contains directives for selecting dates.
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties sectionHeading="Datepicker calendar properties">
+    <sky-demo-page-property
+        propertyName="selectedDate"
+        isOptional="true"
+    >
+      Specifies the selected date in the calendar, when not specified it is set to `new Date()`.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="minDate"
+        isOptional="true"
+    >
+      Specifies a minimum selectable date in the calendar.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="maxDate"
+      isOptional="true">
+      Specifies a maximum selectable date in the calendar.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="startingDay"
+      isOptional="true"
+      defaultValue="0">
+      Specifies the starting day of the week in the calendar, where 0 sets the starting day to Sunday.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+  <sky-demo-page-properties sectionHeading="Datepicker calendar events">
+    <sky-demo-page-property
+      propertyName="selectedDateChange">
+      When a user selects a new date using the calendar, this event emits the selected date object.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+
+  <sky-demo-page-example>
+    <sky-datepicker-demo></sky-datepicker-demo>
+    <sky-demo-page-code demoName="Datepicker"></sky-demo-page-code>
+  </sky-demo-page-example>
+
+</sky-demo-page>

src/app/components/demo-components.component.html

@@ -9,6 +9,7 @@ <h1>Components</h1>
         *ngFor="let component of components"
         [url]="component.url"
         [componentName]="component.name"
+        [hidden]="component.name === 'Datepicker'"
         [icon]="component.icon"
     >
       {{ component.summary }}

src/app/components/demo-components.service.ts

@@ -111,6 +111,27 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Datepicker',
+        icon: 'calendar',
+        // tslint:disable-next-line
+        summary: `The datepicker module contains directives for selecting dates.`,
+        url: '/components/datepicker',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'datepicker-demo.component.html',
+              fileContents: require('!!raw!./datepicker/datepicker-demo.component.html')
+            },
+            {
+              name: 'datepicker-demo.component.ts',
+              fileContents: require('!!raw!./datepicker/datepicker-demo.component.ts'),
+              componentName: 'SkyDatepickerDemoComponent',
+              bootstrapSelector: 'sky-datepicker-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Definition list',
         icon: 'list-alt',

src/core.ts

@@ -9,6 +9,7 @@ import { SkyCardModule } from './modules/card';
 import { SkyCheckboxModule } from './modules/checkbox';
 import { SkyChevronModule } from './modules/chevron';
 import { SkyColumnSelectorModule } from './modules/column-selector';
+import { SkyDatepickerModule } from './modules/datepicker';
 import { SkyDefinitionListModule } from './modules/definition-list';
 import { SkyDropdownModule } from './modules/dropdown';
 import { SkyErrorModule } from './modules/error';
@@ -80,7 +81,8 @@ import { SkyWaitModule } from './modules/wait';
     SkyTextExpandRepeaterModule,
     SkyTilesModule,
     SkyToolbarModule,
-    SkyWaitModule
+    SkyWaitModule,
+    SkyDatepickerModule
   ]
 })
 export class SkyModule { }
@@ -91,6 +93,7 @@ export * from './modules/action-button';
 export * from './modules/card';
 export * from './modules/checkbox';
 export * from './modules/column-selector';
+export * from './modules/datepicker';
 export * from './modules/definition-list';
 export * from './modules/dropdown';
 export * from './modules/error';

src/modules/datepicker/date-formatter.ts

@@ -0,0 +1,7 @@
+let moment = require('moment');
+
+export class SkyDateFormatter {
+  public format(date: Date, format: string): string {
+    return moment(date.getTime()).format(format);
+  }
+}

src/modules/datepicker/datepicker-calendar-inner.component.html

@@ -0,0 +1,6 @@
+<div
+  *ngIf="datepickerMode"
+  class="sky-datepicker-calendar-inner"
+  (keydown)="onKeydown($event)">
+  <ng-content></ng-content>
+</div>

src/modules/datepicker/datepicker-calendar-inner.component.scss

@@ -0,0 +1,33 @@
+@import "../../scss/mixins";
+
+.sky-datepicker-calendar-inner {
+  border-radius: 5px;
+  background-color: $sky-color-white;
+  @include sky-border(light, top, bottom, left, right);
+
+  /deep/ .sky-btn-default {
+    border-color: $sky-color-white;
+  }
+
+  /deep/ .sky-datepicker-center {
+    text-align: center;
+  }
+
+  /deep/ .sky-datepicker-btn-selected {
+    color: $sky-color-white;
+    background-color: $sky-color-blue;
+    @include sky-border(dark, top, bottom, left, right);
+  }
+
+  /deep/ .sky-datepicker-secondary {
+    color: $sky-color-gray-light;
+  }
+
+  /deep/ .sky-datepicker-btn-date {
+    min-width: 100%;
+  }
+
+  /deep/ .sky-datepicker-calendar-title {
+    width: 100%;
+  }
+}