@skyux/datetime 4.12.0 → 4.13.0

package/fesm5/skyux-datetime.js

@@ -2,14 +2,15 @@ import { __decorate, __param } from 'tslib';
 import { Pipe, Injectable, NgModule, Renderer2, EventEmitter, Input, Output, Component, ViewEncapsulation, ElementRef, ViewChild, ChangeDetectorRef, Optional, TemplateRef, ChangeDetectionStrategy, forwardRef, HostListener, Directive } from '@angular/core';
 import { SkyIntlDateFormatter, SkyAppLocaleProvider, getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import { Subject, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
-import { takeUntil, distinctUntilChanged, first, map } from 'rxjs/operators';
+import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
 import * as moment_ from 'moment';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormControl, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { SkyAffixAutoFitContext, SkyAffixService, SkyCoreAdapterService, SkyOverlayService, SkyAffixModule, SkyOverlayModule, SkyAppWindowRef } from '@skyux/core';
 import { SkyInputBoxHostService, SkyInputBoxModule } from '@skyux/forms';
-import { SkyIconModule } from '@skyux/indicators';
+import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
+import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 
 // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
 var moment = moment_;
@@ -182,6 +183,9 @@ var SkyFuzzyDateService = /** @class */ (function () {
      * If not provided, the locale will be taken from the browser's default locale.
      */
     SkyFuzzyDateService.prototype.format = function (fuzzyDate, format, locale) {
+        if (!locale) {
+            locale = this.currentLocale;
+        }
         if (!this.isFuzzyDateValid(fuzzyDate)) {
             return '';
         }
@@ -231,6 +235,10 @@ var SkyFuzzyDateService = /** @class */ (function () {
         var day = fuzzyDate.day || 1;
         return moment$1([year, month, day]);
     };
+    /**
+     * Gets a string instance of a fuzzy date.
+     * @deprecated Deprecated in favor of the `format` function.
+     */
     SkyFuzzyDateService.prototype.getStringFromFuzzyDate = function (fuzzyDate, dateFormat) {
         if (!fuzzyDate || !dateFormat) {
             return;
@@ -482,6 +490,9 @@ var SkyFuzzyDateService = /** @class */ (function () {
      * year only
      */
     SkyFuzzyDateService.prototype.isFuzzyDateValid = function (fuzzyDate) {
+        if (!fuzzyDate) {
+            return false;
+        }
         // If none of the dates part are specified, return false.
         if (!fuzzyDate.day && !fuzzyDate.month && !fuzzyDate.year) {
             return false;
@@ -825,6 +836,7 @@ var SkyDatepickerCalendarInnerComponent = /** @class */ (function () {
             39: 'right',
             40: 'down'
         };
+        this.ngUnsubscribe = new Subject();
     }
     Object.defineProperty(SkyDatepickerCalendarInnerComponent.prototype, "selectedDate", {
         get: function () {
@@ -850,6 +862,10 @@ var SkyDatepickerCalendarInnerComponent = /** @class */ (function () {
     SkyDatepickerCalendarInnerComponent.prototype.ngOnChanges = function (changes) {
         this.refreshView();
     };
+    SkyDatepickerCalendarInnerComponent.prototype.ngOnDestroy = function () {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    };
     SkyDatepickerCalendarInnerComponent.prototype.setCompareHandler = function (handler, type) {
         if (type === 'day') {
             this.compareHandlerDay = handler;
@@ -953,6 +969,7 @@ var SkyDatepickerCalendarInnerComponent = /** @class */ (function () {
         }
     };
     SkyDatepickerCalendarInnerComponent.prototype.createDateObject = function (date, format, isSecondary, id) {
+        var customDateMatch = this.getCustomDate(date);
         var dateObject = {
             date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
             label: this.dateFilter(date, format),
@@ -960,7 +977,9 @@ var SkyDatepickerCalendarInnerComponent = /** @class */ (function () {
             disabled: this.isDisabled(date),
             current: this.compare(date, new Date()) === 0,
             secondary: isSecondary,
-            uid: id
+            uid: id,
+            keyDate: customDateMatch ? customDateMatch.keyDate : undefined,
+            keyDateText: customDateMatch ? customDateMatch.keyDateText : []
         };
         return dateObject;
     };
@@ -1047,10 +1066,27 @@ var SkyDatepickerCalendarInnerComponent = /** @class */ (function () {
             this.refreshView();
         }
     };
+    /**
+     * Date is disabled if it meets any of these criteria:
+     * 1. Date falls outside the min or max dates set by the SkyDatepickerConfigService.
+     * 2. Date is marked as disabled in the customDates array.
+     */
     SkyDatepickerCalendarInnerComponent.prototype.isDisabled = function (date) {
-        return ((this.minDate && this.compare(date, this.minDate) < 0)
-            || (this.maxDate && this.compare(date, this.maxDate) > 0));
+        var customDate = this.getCustomDate(date);
+        return ((this.minDate && this.compare(date, this.minDate) < 0) ||
+            (this.maxDate && this.compare(date, this.maxDate) > 0)) ||
+            (customDate && customDate.disabled);
+    };
+    SkyDatepickerCalendarInnerComponent.prototype.getCustomDate = function (date) {
+        if (this.customDates) {
+            return this.customDates.find(function (customDate) {
+                return customDate.date.getTime() === date.getTime();
+            });
+        }
     };
+    __decorate([
+        Input()
+    ], SkyDatepickerCalendarInnerComponent.prototype, "customDates", void 0);
     __decorate([
         Input()
     ], SkyDatepickerCalendarInnerComponent.prototype, "startingDay", void 0);
@@ -1104,6 +1140,7 @@ var SkyDatepickerCalendarComponent = /** @class */ (function () {
         this.config = config;
         this.elementRef = elementRef;
         this.selectedDateChange = new EventEmitter(undefined);
+        this.calendarDateRangeChange = new EventEmitter();
         this.calendarModeChange = new EventEmitter();
         this._now = new Date();
         this.formatter = new SkyDateFormatter();
@@ -1137,6 +1174,9 @@ var SkyDatepickerCalendarComponent = /** @class */ (function () {
     SkyDatepickerCalendarComponent.prototype.configureOptions = function () {
         Object.assign(this, this.config);
     };
+    SkyDatepickerCalendarComponent.prototype.onCalendarDateRangeChange = function (event) {
+        this.calendarDateRangeChange.next(event);
+    };
     SkyDatepickerCalendarComponent.prototype.onCalendarModeChange = function (event) {
         this.calendarModeChange.emit(event);
     };
@@ -1164,6 +1204,12 @@ var SkyDatepickerCalendarComponent = /** @class */ (function () {
         { type: SkyDatepickerConfigService },
         { type: ElementRef }
     ]; };
+    __decorate([
+        Input()
+    ], SkyDatepickerCalendarComponent.prototype, "customDates", void 0);
+    __decorate([
+        Input()
+    ], SkyDatepickerCalendarComponent.prototype, "isDaypickerWaiting", void 0);
     __decorate([
         Input()
     ], SkyDatepickerCalendarComponent.prototype, "minDate", void 0);
@@ -1179,6 +1225,9 @@ var SkyDatepickerCalendarComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], SkyDatepickerCalendarComponent.prototype, "selectedDateChange", void 0);
+    __decorate([
+        Output()
+    ], SkyDatepickerCalendarComponent.prototype, "calendarDateRangeChange", void 0);
     __decorate([
         Output()
     ], SkyDatepickerCalendarComponent.prototype, "calendarModeChange", void 0);
@@ -1191,7 +1240,7 @@ var SkyDatepickerCalendarComponent = /** @class */ (function () {
     SkyDatepickerCalendarComponent = __decorate([
         Component({
             selector: 'sky-datepicker-calendar',
-            template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n      [selectedDate]=\"selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [startingDay]=\"startingDay\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange($event)\">\n    <sky-daypicker tabindex=\"0\"></sky-daypicker>\n    <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n    <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n  </sky-datepicker-inner>\n</div>\n",
+            template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [selectedDate]=\"selectedDate\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [startingDay]=\"startingDay\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n  >\n    <sky-daypicker\n      tabindex=\"0\"\n      [customDates]=\"customDates\"\n      [isWaiting]=\"isDaypickerWaiting\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n    ></sky-daypicker>\n    <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n    <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n  </sky-datepicker-inner>\n</div>\n",
             providers: [SkyDatepickerAdapterService],
             styles: [".sky-datepicker-calendar{display:block}"]
         })
@@ -1199,794 +1248,557 @@ var SkyDatepickerCalendarComponent = /** @class */ (function () {
     return SkyDatepickerCalendarComponent;
 }());
 
+var nextId = 0;
 /**
- * @internal
+ * Creates the datepicker button and calendar.
+ * You must wrap this component around an input with the `skyDatepickerInput` directive.
  */
-var SkyDayPickerComponent = /** @class */ (function () {
-    function SkyDayPickerComponent(datepicker) {
-        this.labels = [];
-        this.rows = [];
-        this.weekNumbers = [];
-        this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-        this.datepicker = datepicker;
-    }
-    SkyDayPickerComponent.prototype.ngOnInit = function () {
+var SkyDatepickerComponent = /** @class */ (function () {
+    function SkyDatepickerComponent(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
         var _this = this;
-        this.datepicker.stepDay = { months: 1 };
-        this.datepicker.setRefreshViewHandler(function () {
-            _this.refreshDayView();
-        }, 'day');
-        this.datepicker.setCompareHandler(this.compareDays, 'day');
-        this.datepicker.setKeydownHandler(function (key, event) {
-            _this.keydownDays(key, event);
-        }, 'day');
-        this.datepicker.refreshView();
-    };
-    SkyDayPickerComponent.prototype.getDates = function (startDate, n) {
-        var dates = new Array(n);
-        var current = new Date(startDate.getTime());
-        var i = 0;
-        var date;
-        while (i < n) {
-            date = new Date(current.getTime());
-            date = this.datepicker.fixTimeZone(date);
-            dates[i++] = date;
-            current = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+        this.affixService = affixService;
+        this.changeDetector = changeDetector;
+        this.coreAdapter = coreAdapter;
+        this.overlayService = overlayService;
+        this.inputBoxHostService = inputBoxHostService;
+        /**
+         * Adds a class to the datepicker.
+         */
+        this.pickerClass = '';
+        /**
+         * Fires when the range of displayed dates in the calendar changes. Provides the
+         * current range of displayed dates and a mutable `customDate` property consumers can use
+         * to modify individual dates on the calendar.
+         */
+        this.calendarDateRangeChange = new EventEmitter();
+        this.dateChange = new EventEmitter();
+        this.isDaypickerWaiting = false;
+        this.isOpen = false;
+        this.isVisible = false;
+        this.ngUnsubscribe = new Subject();
+        this._disabled = false;
+        var uniqueId = nextId++;
+        this.calendarId = "sky-datepicker-calendar-" + uniqueId;
+        this.triggerButtonId = "sky-datepicker-button-" + uniqueId;
+        // Update icons when theme changes.
+        themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(function () {
+            _this.changeDetector.markForCheck();
+        });
+    }
+    Object.defineProperty(SkyDatepickerComponent.prototype, "buttonIsFocused", {
+        /**
+         * @internal
+         * Indicates if the calendar button element or any of its children have focus.
+         * @deprecated This property will be removed in the next major version release.
+         */
+        get: function () {
+            /* sanity check */
+            /* istanbul ignore if */
+            if (!this.triggerButtonRef) {
+                return false;
+            }
+            var activeEl = document.activeElement;
+            return this.triggerButtonRef.nativeElement === activeEl;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyDatepickerComponent.prototype, "calendarIsFocused", {
+        /**
+         * @internal
+         * Indicates if the calendar element or any of its children have focus.
+         * @deprecated This property will be removed in the next major version release.
+         */
+        get: function () {
+            if (!this.calendarRef) {
+                return false;
+            }
+            var focusedEl = document.activeElement;
+            return this.calendarRef.nativeElement.contains(focusedEl);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyDatepickerComponent.prototype, "calendarIsVisible", {
+        /**
+         * @internal
+         * Indicates if the calendar element's visiblity property is 'visible'.
+         * @deprecated This property will be removed in the next major version release.
+         */
+        get: function () {
+            return this.calendar ? this.calendar.isVisible : false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyDatepickerComponent.prototype, "disabled", {
+        get: function () {
+            return this._disabled;
+        },
+        set: function (value) {
+            this._disabled = value;
+            this.changeDetector.markForCheck();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyDatepickerComponent.prototype, "selectedDate", {
+        set: function (value) {
+            this._selectedDate = value;
+            if (this.calendar) {
+                this.calendar.writeValue(this._selectedDate);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyDatepickerComponent.prototype, "calendarRef", {
+        get: function () {
+            return this._calendarRef;
+        },
+        set: function (value) {
+            var _this = this;
+            if (value) {
+                this._calendarRef = value;
+                // Wait for the calendar component to render before gauging dimensions.
+                setTimeout(function () {
+                    _this.calendar.writeValue(_this._selectedDate);
+                    _this.destroyAffixer();
+                    _this.createAffixer();
+                    setTimeout(function () {
+                        _this.coreAdapter.getFocusableChildrenAndApplyFocus(_this.calendarRef, '.sky-datepicker-calendar-inner', false);
+                        _this.isVisible = true;
+                        _this.changeDetector.markForCheck();
+                    });
+                });
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SkyDatepickerComponent.prototype.ngOnInit = function () {
+        if (this.inputBoxHostService) {
+            this.inputBoxHostService.populate({
+                inputTemplate: this.inputTemplateRef,
+                buttonsTemplate: this.triggerButtonTemplateRef
+            });
         }
-        return dates;
     };
-    SkyDayPickerComponent.prototype.compareDays = function (date1, date2) {
-        var d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
-        var d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
-        return d1.getTime() - d2.getTime();
+    SkyDatepickerComponent.prototype.ngOnDestroy = function () {
+        this.dateChange.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.removePickerEventListeners();
+        this.destroyAffixer();
+        this.destroyOverlay();
     };
-    SkyDayPickerComponent.prototype.refreshDayView = function () {
-        var year = this.datepicker.activeDate.getFullYear();
-        var month = this.datepicker.activeDate.getMonth();
-        var firstDayOfMonth = new Date(year, month, 1);
-        var difference = this.datepicker.startingDay - firstDayOfMonth.getDay();
-        var numDisplayedFromPreviousMonth = (difference > 0)
-            ? 7 - difference
-            : -difference;
-        var firstDate = new Date(firstDayOfMonth.getTime());
-        /* istanbul ignore else */
-        /* sanity check */
-        if (numDisplayedFromPreviousMonth > 0) {
-            firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
-        }
-        // 42 is the number of days on a six-week calendar
-        var days = this.getDates(firstDate, 42);
-        var pickerDates = [];
-        for (var i = 0; i < 42; i++) {
-            var _dateObject = this.datepicker.createDateObject(days[i], this.datepicker.formatDay, days[i].getMonth() !== month, this.datepicker.datepickerId + '-' + i);
-            pickerDates[i] = _dateObject;
+    SkyDatepickerComponent.prototype.onCalendarModeChange = function () {
+        var _this = this;
+        // Let the calendar populate in the DOM before recalculating placement.
+        setTimeout(function () {
+            _this.affixer.reaffix();
+        });
+    };
+    SkyDatepickerComponent.prototype.onSelectedDateChange = function (value) {
+        this.dateChange.emit(value);
+        this.closePicker();
+    };
+    SkyDatepickerComponent.prototype.onTriggerButtonClick = function () {
+        if (this.isOpen) {
+            this.closePicker();
         }
-        this.labels = [];
-        for (var j = 0; j < 7; j++) {
-            this.labels[j] = {};
-            this.labels[j].abbr =
-                this.datepicker.dateFilter(pickerDates[j].date, this.datepicker.formatDayHeader);
-            this.labels[j].full = this.datepicker.dateFilter(pickerDates[j].date, 'EEEE');
+        else {
+            this.openPicker();
         }
-        this.title =
-            this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
-        this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
     };
-    SkyDayPickerComponent.prototype.keydownDays = function (key, event) {
-        var date = this.datepicker.activeDate.getDate();
+    SkyDatepickerComponent.prototype.onCalendarDateRangeChange = function (event) {
+        var _this = this;
         /* istanbul ignore else */
-        /* sanity check */
-        if (key === 'left') {
-            date = date - 1;
-        }
-        else if (key === 'up') {
-            date = date - 7;
-        }
-        else if (key === 'right') {
-            date = date + 1;
-        }
-        else if (key === 'down') {
-            date = date + 7;
+        if (event) {
+            this.cancelCustomDatesSubscription();
+            var args = {
+                startDate: event.startDate,
+                endDate: event.endDate,
+                customDates: undefined
+            };
+            this.calendarDateRangeChange.emit(args);
+            // If consumer has added an observable to the args, watch for incoming custom dates.
+            /* istanbul ignore else */
+            if (args.customDates) {
+                this.isDaypickerWaiting = true;
+                // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
+                this.changeDetector.detectChanges();
+                this.customDatesSubscription = args.customDates
+                    .pipe(debounceTime(250))
+                    .subscribe(function (result) {
+                    _this.customDates = result;
+                    _this.isDaypickerWaiting = false;
+                    // Trigger change detection in child components to show changes in the calendar.
+                    _this.changeDetector.markForCheck();
+                });
+            }
         }
-        else if (key === 'pageup' || key === 'pagedown') {
-            var month = this.datepicker.activeDate.getMonth() + (key === 'pageup' ? -1 : 1);
-            this.datepicker.activeDate.setMonth(month, 1);
-            date =
-                Math.min(this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth()), date);
-        }
-        else if (key === 'home') {
-            date = 1;
-        }
-        else if (key === 'end') {
-            date = this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth());
-        }
-        this.datepicker.activeDate.setDate(date);
     };
-    SkyDayPickerComponent.prototype.getDaysInMonth = function (year, month) {
-        return month === 1 && year % 4 === 0 &&
-            (year % 400 === 0 || year % 100 !== 0) ? 29 : this.daysInMonth[month];
+    SkyDatepickerComponent.prototype.closePicker = function () {
+        this.destroyAffixer();
+        this.destroyOverlay();
+        this.removePickerEventListeners();
+        this.triggerButtonRef.nativeElement.focus();
+        this.isOpen = false;
     };
-    SkyDayPickerComponent.ctorParameters = function () { return [
-        { type: SkyDatepickerCalendarInnerComponent }
-    ]; };
-    SkyDayPickerComponent = __decorate([
-        Component({
-            selector: 'sky-daypicker',
-            template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\n  class=\"sky-daypicker-wrapper\"\n>\n  <table\n    class=\"sky-daypicker-table\"\n    role=\"grid\"\n    [attr.aria-labelledby]=\"datepicker.datepickerId+'-title'\"\n    [attr.aria-activedescendant]=\"datepicker.activeDateId\"\n  >\n    <thead>\n      <tr>\n        <th\n          class=\"sky-datepicker-header-left\"\n          scope=\"col\"\n        >\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n            (click)=\"datepicker.moveCalendar($event, -1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-left\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-left\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n        <th\n          scope=\"col\"\n          [attr.colspan]=\"5\"\n        >\n          <button\n            [id]=\"datepicker.datepickerId + '-title'\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n            (click)=\"datepicker.toggleModeCalendar($event)\"\n            [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n            [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <strong>{{title}}</strong>\n          </button>\n        </th>\n        <th\n          class=\"sky-datepicker-header-right\"\n          scope=\"col\"\n        >\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n            (click)=\"datepicker.moveCalendar($event, 1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-right\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-right\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n      </tr>\n      <tr>\n        <th\n          scope=\"col\"\n          *ngFor=\"let label of labels\"\n          class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{label.abbr}}</b>\n          </small>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-template\n        ngFor\n        [ngForOf]=\"rows\"\n        let-row=\"$implicit\"\n        let-index=\"index\"\n        >\n        <tr role=\"row\">\n          <td\n            *ngFor=\"let date of row\"\n            class=\"sky-datepicker-center\"\n            role=\"gridcell\"\n            [id]=\"date.uid\"\n            >\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n              [ngClass]=\"{ 'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n              tabindex=\"-1\"\n              >\n              <span\n                [ngClass]=\"{'sky-datepicker-secondary': date.secondary }\"\n                >{{date.label}}</span>\n            </button>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n",
-            styles: [".sky-theme-modern :host:focus,:host-context(.sky-theme-modern) :host:focus{outline:0}"]
-        })
-    ], SkyDayPickerComponent);
-    return SkyDayPickerComponent;
-}());
-
-/**
- * @internal
- */
-var SkyMonthPickerComponent = /** @class */ (function () {
-    function SkyMonthPickerComponent(datepicker) {
-        this.rows = [];
-        this.datepicker = datepicker;
-    }
-    SkyMonthPickerComponent.prototype.ngOnInit = function () {
+    SkyDatepickerComponent.prototype.openPicker = function () {
+        this.isVisible = false;
+        this.changeDetector.markForCheck();
+        this.removePickerEventListeners();
+        this.calendarUnsubscribe = new Subject();
+        this.destroyOverlay();
+        this.createOverlay();
+        this.isOpen = true;
+        this.changeDetector.markForCheck();
+    };
+    SkyDatepickerComponent.prototype.createAffixer = function () {
         var _this = this;
-        this.datepicker.stepMonth = {
-            years: 1
-        };
-        this.datepicker.setRefreshViewHandler(function () {
-            _this.refreshMonthView();
-        }, 'month');
-        this.datepicker.setCompareHandler(this.compareMonth, 'month');
-        this.datepicker.refreshView();
-        this.datepicker.setKeydownHandler(function (key, event) {
-            _this.keydownMonths(key, event);
-        }, 'month');
+        var affixer = this.affixService.createAffixer(this.calendarRef);
+        // Hide calendar when trigger button is scrolled off screen.
+        affixer.placementChange
+            .pipe(takeUntil(this.calendarUnsubscribe))
+            .subscribe(function (change) {
+            _this.isVisible = (change.placement !== null);
+            _this.changeDetector.markForCheck();
+        });
+        affixer.affixTo(this.triggerButtonRef.nativeElement, {
+            autoFitContext: SkyAffixAutoFitContext.Viewport,
+            enableAutoFit: true,
+            horizontalAlignment: 'right',
+            isSticky: true,
+            placement: 'below'
+        });
+        this.affixer = affixer;
     };
-    SkyMonthPickerComponent.prototype.compareMonth = function (date1, date2) {
-        var d1 = new Date(date1.getFullYear(), date1.getMonth());
-        var d2 = new Date(date2.getFullYear(), date2.getMonth());
-        return d1.getTime() - d2.getTime();
+    SkyDatepickerComponent.prototype.destroyAffixer = function () {
+        /*istanbul ignore else*/
+        if (this.affixer) {
+            this.affixer.destroy();
+            this.affixer = undefined;
+        }
     };
-    SkyMonthPickerComponent.prototype.refreshMonthView = function () {
-        var months = new Array(12);
-        var year = this.datepicker.activeDate.getFullYear();
-        var date;
-        for (var i = 0; i < 12; i++) {
-            date = new Date(year, i, 1);
-            date = this.datepicker.fixTimeZone(date);
-            months[i] =
-                this.datepicker.createDateObject(date, this.datepicker.formatMonth, false, this.datepicker.datepickerId + '-' + i);
+    SkyDatepickerComponent.prototype.createOverlay = function () {
+        var _this = this;
+        var overlay = this.overlayService.create({
+            wrapperClass: this.pickerClass,
+            enableClose: false,
+            enablePointerEvents: false
+        });
+        overlay.backdropClick
+            .pipe(takeUntil(this.calendarUnsubscribe))
+            .subscribe(function () {
+            if (_this.isOpen) {
+                _this.closePicker();
+            }
+        });
+        this.addKeydownListner();
+        overlay.attachTemplate(this.calendarTemplateRef);
+        this.overlay = overlay;
+    };
+    SkyDatepickerComponent.prototype.destroyOverlay = function () {
+        /*istanbul ignore else*/
+        if (this.overlay) {
+            this.overlayService.close(this.overlay);
+            this.overlay = undefined;
         }
-        this.title =
-            this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatMonthTitle);
-        this.rows = this.datepicker.createCalendarRows(months, this.datepicker.monthColLimit);
     };
-    SkyMonthPickerComponent.prototype.keydownMonths = function (key, event) {
-        var date = this.datepicker.activeDate.getMonth();
+    SkyDatepickerComponent.prototype.addKeydownListner = function () {
+        var _this = this;
+        this.overlayKeydownListner = fromEvent(window.document, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(function (event) {
+            var _a;
+            var key = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            if (key === 'escape' && _this.isOpen) {
+                _this.closePicker();
+            }
+        });
+    };
+    SkyDatepickerComponent.prototype.removePickerEventListeners = function () {
+        var _a;
         /* istanbul ignore else */
-        /* sanity check */
-        if (key === 'left') {
-            date = date - 1;
-        }
-        else if (key === 'up') {
-            date = date - this.datepicker.monthColLimit;
-        }
-        else if (key === 'right') {
-            date = date + 1;
-        }
-        else if (key === 'down') {
-            date = date + this.datepicker.monthColLimit;
-        }
-        else if (key === 'pageup' || key === 'pagedown') {
-            var year = this.datepicker.activeDate.getFullYear() + (key === 'pageup' ? -1 : 1);
-            this.datepicker.activeDate.setFullYear(year);
-        }
-        else if (key === 'home') {
-            date = 0;
+        if (this.calendarUnsubscribe) {
+            this.calendarUnsubscribe.next();
+            this.calendarUnsubscribe.complete();
+            this.calendarUnsubscribe = undefined;
         }
-        else if (key === 'end') {
-            date = 11;
+        (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    };
+    SkyDatepickerComponent.prototype.cancelCustomDatesSubscription = function () {
+        if (this.customDatesSubscription) {
+            this.customDatesSubscription.unsubscribe();
+            this.customDatesSubscription = undefined;
         }
-        this.datepicker.activeDate.setMonth(date);
     };
-    SkyMonthPickerComponent.ctorParameters = function () { return [
-        { type: SkyDatepickerCalendarInnerComponent }
+    SkyDatepickerComponent.ctorParameters = function () { return [
+        { type: SkyAffixService },
+        { type: ChangeDetectorRef },
+        { type: SkyCoreAdapterService },
+        { type: SkyOverlayService },
+        { type: SkyInputBoxHostService, decorators: [{ type: Optional }] },
+        { type: SkyThemeService, decorators: [{ type: Optional }] }
     ]; };
-    SkyMonthPickerComponent = __decorate([
-        Component({
-            selector: 'sky-monthpicker',
-            template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button></th>\n      <th [attr.colspan]=\"((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"text-center\"\n        role=\"gridcell\"\n        id=\"{{date.uid}}\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span [ngClass]=\"{'sky-datepicker-current': date.current}\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n",
-            styles: [".sky-theme-modern :host:focus,:host-context(.sky-theme-modern) :host:focus{outline:0}"]
+    __decorate([
+        Input()
+    ], SkyDatepickerComponent.prototype, "pickerClass", void 0);
+    __decorate([
+        Output()
+    ], SkyDatepickerComponent.prototype, "calendarDateRangeChange", void 0);
+    __decorate([
+        ViewChild(SkyDatepickerCalendarComponent)
+    ], SkyDatepickerComponent.prototype, "calendar", void 0);
+    __decorate([
+        ViewChild('calendarRef', {
+            read: ElementRef
         })
-    ], SkyMonthPickerComponent);
-    return SkyMonthPickerComponent;
+    ], SkyDatepickerComponent.prototype, "calendarRef", null);
+    __decorate([
+        ViewChild('calendarTemplateRef', {
+            read: TemplateRef
+        })
+    ], SkyDatepickerComponent.prototype, "calendarTemplateRef", void 0);
+    __decorate([
+        ViewChild('triggerButtonRef', {
+            read: ElementRef
+        })
+    ], SkyDatepickerComponent.prototype, "triggerButtonRef", void 0);
+    __decorate([
+        ViewChild('inputTemplateRef', {
+            read: TemplateRef,
+            static: true
+        })
+    ], SkyDatepickerComponent.prototype, "inputTemplateRef", void 0);
+    __decorate([
+        ViewChild('triggerButtonTemplateRef', {
+            read: TemplateRef,
+            static: true
+        })
+    ], SkyDatepickerComponent.prototype, "triggerButtonTemplateRef", void 0);
+    SkyDatepickerComponent = __decorate([
+        Component({
+            selector: 'sky-datepicker',
+            template: "<div\n  class=\"sky-datepicker\"\n>\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div\n      class=\"sky-input-group\"\n    >\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div\n    class=\"sky-input-group-btn\"\n  >\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\"\n        icon=\"calendar\"\n        size=\"lg\"\n      ></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}"]
+        }),
+        __param(4, Optional()),
+        __param(5, Optional())
+    ], SkyDatepickerComponent);
+    return SkyDatepickerComponent;
 }());
 
-/**
- * @internal
- */
-var SkyYearPickerComponent = /** @class */ (function () {
-    function SkyYearPickerComponent(datepicker) {
-        this.rows = [];
-        this.datepicker = datepicker;
-    }
-    SkyYearPickerComponent.prototype.ngOnInit = function () {
+var moment$3 = moment_;
+// tslint:disable:no-forward-ref no-use-before-declare
+var SKY_DATEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return SkyDatepickerInputDirective; }),
+    multi: true
+};
+var SKY_DATEPICKER_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(function () { return SkyDatepickerInputDirective; }),
+    multi: true
+};
+// tslint:enable
+var SkyDatepickerInputDirective = /** @class */ (function () {
+    function SkyDatepickerInputDirective(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
         var _this = this;
-        this.datepicker.stepYear = { years: this.datepicker.yearRange };
-        this.datepicker.setRefreshViewHandler(function () {
-            _this.refreshYearView();
-        }, 'year');
-        this.datepicker.setCompareHandler(this.compareYears, 'year');
-        this.datepicker.setKeydownHandler(function (key, event) {
-            _this.keydownYears(key, event);
-        }, 'year');
-        this.datepicker.refreshView();
-    };
-    SkyYearPickerComponent.prototype.getStartingYear = function (year) {
-        return Math.floor((year - 1) / this.datepicker.yearRange) * this.datepicker.yearRange + 1;
-    };
-    SkyYearPickerComponent.prototype.compareYears = function (date1, date2) {
-        return date1.getFullYear() - date2.getFullYear();
-    };
-    SkyYearPickerComponent.prototype.refreshYearView = function () {
-        var years = new Array(this.datepicker.yearRange);
-        var date;
-        var start = this.getStartingYear(this.datepicker.activeDate.getFullYear());
-        for (var i = 0; i < this.datepicker.yearRange; i++) {
-            date = new Date(this.datepicker.activeDate);
-            date.setFullYear(start + i, 0, 1);
-            years[i] =
-                this.datepicker.createDateObject(date, this.datepicker.formatYear, false, this.datepicker.datepickerId + '-' + i);
-        }
-        this.title = [years[0].label,
-            years[this.datepicker.yearRange - 1].label].join(' - ');
-        this.rows = this.datepicker.createCalendarRows(years, this.datepicker.yearColLimit);
-    };
-    SkyYearPickerComponent.prototype.keydownYears = function (key, event) {
-        var date = this.datepicker.activeDate.getFullYear();
-        /* istanbul ignore else */
-        /* sanity check */
-        if (key === 'left') {
-            date = date - 1;
-        }
-        else if (key === 'up') {
-            date = date - this.datepicker.yearColLimit;
-        }
-        else if (key === 'right') {
-            date = date + 1;
-        }
-        else if (key === 'down') {
-            date = date + this.datepicker.yearColLimit;
-        }
-        else if (key === 'pageup' || key === 'pagedown') {
-            date += (key === 'pageup' ? -1 : 1) * this.datepicker.yearRange;
-        }
-        else if (key === 'home') {
-            date = this.getStartingYear(this.datepicker.activeDate.getFullYear());
-        }
-        else if (key === 'end') {
-            date
-                = this.getStartingYear(this.datepicker.activeDate.getFullYear()) + this.datepicker.yearRange - 1;
-        }
-        this.datepicker.activeDate.setFullYear(date);
-    };
-    SkyYearPickerComponent.ctorParameters = function () { return [
-        { type: SkyDatepickerCalendarInnerComponent }
-    ]; };
-    SkyYearPickerComponent = __decorate([
-        Component({
-            selector: 'sky-yearpicker',
-            template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th [attr.colspan]=\"((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"sky-datepicker-row\"\n        role=\"gridcell\"\n        >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span\n            [ngClass]=\"{'sky-datepicker-current': date.current }\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n",
-            styles: [".sky-theme-modern :host:focus,:host-context(.sky-theme-modern) :host:focus{outline:0}"]
-        })
-    ], SkyYearPickerComponent);
-    return SkyYearPickerComponent;
-}());
-
-var nextId = 0;
-/**
- * Creates the datepicker button and calendar.
- * You must wrap this component around an input with the `skyDatepickerInput` directive.
- */
-var SkyDatepickerComponent = /** @class */ (function () {
-    function SkyDatepickerComponent(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
-        var _this = this;
-        this.affixService = affixService;
+        this.adapter = adapter;
         this.changeDetector = changeDetector;
-        this.coreAdapter = coreAdapter;
-        this.overlayService = overlayService;
-        this.inputBoxHostService = inputBoxHostService;
+        this.configService = configService;
+        this.elementRef = elementRef;
+        this.localeProvider = localeProvider;
+        this.renderer = renderer;
+        this.resourcesService = resourcesService;
+        this.datepickerComponent = datepickerComponent;
         /**
-         * Adds a class to the datepicker.
+         * Indicates whether to disable date validation on the datepicker input.
+         * @default false
          */
-        this.pickerClass = '';
-        this.dateChange = new EventEmitter();
-        this.isOpen = false;
-        this.isVisible = false;
+        this.skyDatepickerNoValidate = false;
+        this.dateFormatter = new SkyDateFormatter();
+        this.isFirstChange = true;
         this.ngUnsubscribe = new Subject();
-        this._disabled = false;
-        var uniqueId = nextId++;
-        this.calendarId = "sky-datepicker-calendar-" + uniqueId;
-        this.triggerButtonId = "sky-datepicker-button-" + uniqueId;
-        // Update icons when theme changes.
-        themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(function () {
-            _this.changeDetector.markForCheck();
+        this.onChange = function (_) { };
+        /*istanbul ignore next */
+        this.onTouched = function () { };
+        this.onValidatorChange = function () { };
+        this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
+        this.updatePlaceholder();
+        this.localeProvider.getLocaleInfo()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(function (localeInfo) {
+            SkyDateFormatter.setLocale(localeInfo.locale);
+            _this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
+            _this.applyDateFormat();
         });
     }
-    Object.defineProperty(SkyDatepickerComponent.prototype, "buttonIsFocused", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "dateFormat", {
+        get: function () {
+            return this._dateFormat ||
+                this.configService.dateFormat ||
+                this.preferredShortDateFormat;
+        },
         /**
-         * @internal
-         * Indicates if the calendar button element or any of its children have focus.
-         * @deprecated This property will be removed in the next major version release.
+         * Specifies the date format for the input. Place this attribute on the `input` element
+         * to override the default in the `SkyDatepickerConfigService`.
+         * @default MM/DD/YYYY
          */
-        get: function () {
-            /* sanity check */
-            /* istanbul ignore if */
-            if (!this.triggerButtonRef) {
-                return false;
+        set: function (value) {
+            if (value !== this._dateFormat) {
+                this._dateFormat = value;
+                this.applyDateFormat();
             }
-            var activeEl = document.activeElement;
-            return this.triggerButtonRef.nativeElement === activeEl;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SkyDatepickerComponent.prototype, "calendarIsFocused", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "disabled", {
+        get: function () {
+            return this._disabled || false;
+        },
         /**
-         * @internal
-         * Indicates if the calendar element or any of its children have focus.
-         * @deprecated This property will be removed in the next major version release.
+         * Indicates whether to disable the datepicker.
+         * @default false
          */
-        get: function () {
-            if (!this.calendarRef) {
-                return false;
-            }
-            var focusedEl = document.activeElement;
-            return this.calendarRef.nativeElement.contains(focusedEl);
+        set: function (value) {
+            this._disabled = value;
+            this.datepickerComponent.disabled = value;
+            this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', value);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SkyDatepickerComponent.prototype, "calendarIsVisible", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "inputIsFocused", {
         /**
          * @internal
-         * Indicates if the calendar element's visiblity property is 'visible'.
-         * @deprecated This property will be removed in the next major version release.
+         * Indicates if the input element or any of its children have focus.
          */
         get: function () {
-            return this.calendar ? this.calendar.isVisible : false;
+            return this.adapter.elementIsFocused();
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SkyDatepickerComponent.prototype, "disabled", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "maxDate", {
         get: function () {
-            return this._disabled;
+            return this._maxDate || this.configService.maxDate;
         },
+        /**
+         * Specifies the latest date that is available in the calendar. Place this attribute on
+         * the `input` element to override the default in `SkyDatepickerConfigService`.
+         */
         set: function (value) {
-            this._disabled = value;
-            this.changeDetector.markForCheck();
+            this._maxDate = value;
+            this.datepickerComponent.maxDate = this.maxDate;
+            this.onValidatorChange();
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SkyDatepickerComponent.prototype, "selectedDate", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "minDate", {
+        get: function () {
+            return this._minDate || this.configService.minDate;
+        },
+        /**
+         * Specifies the earliest date that is available in the calendar. Place this attribute on
+         * the `input` element to override the default in `SkyDatepickerConfigService`.
+         */
         set: function (value) {
-            this._selectedDate = value;
-            if (this.calendar) {
-                this.calendar.writeValue(this._selectedDate);
+            this._minDate = value;
+            this.datepickerComponent.minDate = this.minDate;
+            this.onValidatorChange();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "skyDatepickerInput", {
+        /**
+         * Creates the datepicker input and calendar. Place this directive on an `input` element,
+         * and wrap the input in a `sky-datepicker` component. The value that users select is driven
+         * through the `ngModel` attribute specified on the `input` element.
+         * @required
+         */
+        set: function (value) {
+            if (value) {
+                console.warn('[Deprecation warning] You no longer need to provide a template reference variable ' +
+                    'to the `skyDatepickerInput` attribute (this will be a breaking change in the next ' +
+                    'major version release).\n' +
+                    'Do this instead:\n' +
+                    '<sky-datepicker>\n  <input skyDatepickerInput />\n</sky-datepicker>');
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SkyDatepickerComponent.prototype, "calendarRef", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "startingDay", {
         get: function () {
-            return this._calendarRef;
+            return this._startingDay || this.configService.startingDay;
         },
+        /**
+         * Specifies the starting day of the week in the calendar, where `0` sets the starting day
+         * to Sunday. Place this attribute on the `input` element to override the default
+         * in `SkyDatepickerConfigService`.
+         * @default 0
+         */
         set: function (value) {
-            var _this = this;
-            if (value) {
-                this._calendarRef = value;
-                // Wait for the calendar component to render before gauging dimensions.
-                setTimeout(function () {
-                    _this.calendar.writeValue(_this._selectedDate);
-                    _this.destroyAffixer();
-                    _this.createAffixer();
-                    setTimeout(function () {
-                        _this.coreAdapter.getFocusableChildrenAndApplyFocus(_this.calendarRef, '.sky-datepicker-calendar-inner', false);
-                        _this.isVisible = true;
-                        _this.changeDetector.markForCheck();
-                    });
-                });
-            }
+            this._startingDay = value;
+            this.datepickerComponent.startingDay = this.startingDay;
+            this.onValidatorChange();
         },
         enumerable: true,
         configurable: true
     });
-    SkyDatepickerComponent.prototype.ngOnInit = function () {
-        this.addTriggerButtonEventListeners();
-        if (this.inputBoxHostService) {
-            this.inputBoxHostService.populate({
-                inputTemplate: this.inputTemplateRef,
-                buttonsTemplate: this.triggerButtonTemplateRef
-            });
-        }
-    };
-    SkyDatepickerComponent.prototype.ngOnDestroy = function () {
-        this.dateChange.complete();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.removePickerEventListeners();
-        this.destroyAffixer();
-        this.destroyOverlay();
-    };
-    SkyDatepickerComponent.prototype.onCalendarModeChange = function () {
-        var _this = this;
-        // Let the calendar populate in the DOM before recalculating placement.
-        setTimeout(function () {
-            _this.affixer.reaffix();
-        });
-    };
-    SkyDatepickerComponent.prototype.onSelectedDateChange = function (value) {
-        this.dateChange.emit(value);
-        this.closePicker();
-    };
-    SkyDatepickerComponent.prototype.onTriggerButtonClick = function () {
-        if (this.isOpen) {
-            this.closePicker();
-        }
-        else {
-            this.openPicker();
-        }
-    };
-    SkyDatepickerComponent.prototype.closePicker = function () {
-        this.destroyAffixer();
-        this.destroyOverlay();
-        this.removePickerEventListeners();
-        this.triggerButtonRef.nativeElement.focus();
-        this.isOpen = false;
-    };
-    SkyDatepickerComponent.prototype.openPicker = function () {
-        this.isVisible = false;
-        this.changeDetector.markForCheck();
-        this.removePickerEventListeners();
-        this.calendarUnsubscribe = new Subject();
-        this.destroyOverlay();
-        this.createOverlay();
-        this.isOpen = true;
-        this.changeDetector.markForCheck();
-    };
-    SkyDatepickerComponent.prototype.createAffixer = function () {
-        var _this = this;
-        var affixer = this.affixService.createAffixer(this.calendarRef);
-        // Hide calendar when trigger button is scrolled off screen.
-        affixer.placementChange
-            .pipe(takeUntil(this.calendarUnsubscribe))
-            .subscribe(function (change) {
-            _this.isVisible = (change.placement !== null);
-            _this.changeDetector.markForCheck();
-        });
-        affixer.affixTo(this.triggerButtonRef.nativeElement, {
-            autoFitContext: SkyAffixAutoFitContext.Viewport,
-            enableAutoFit: true,
-            horizontalAlignment: 'right',
-            isSticky: true,
-            placement: 'below'
-        });
-        this.affixer = affixer;
-    };
-    SkyDatepickerComponent.prototype.destroyAffixer = function () {
-        /*istanbul ignore else*/
-        if (this.affixer) {
-            this.affixer.destroy();
-            this.affixer = undefined;
-        }
-    };
-    SkyDatepickerComponent.prototype.createOverlay = function () {
-        var _this = this;
-        var overlay = this.overlayService.create({
-            wrapperClass: this.pickerClass,
-            enableClose: false,
-            enablePointerEvents: false
-        });
-        overlay.backdropClick
-            .pipe(takeUntil(this.calendarUnsubscribe))
-            .subscribe(function () {
-            if (_this.isOpen) {
-                _this.closePicker();
-            }
-        });
-        overlay.attachTemplate(this.calendarTemplateRef);
-        this.overlay = overlay;
-    };
-    SkyDatepickerComponent.prototype.destroyOverlay = function () {
-        /*istanbul ignore else*/
-        if (this.overlay) {
-            this.overlayService.close(this.overlay);
-            this.overlay = undefined;
-        }
-    };
-    SkyDatepickerComponent.prototype.addTriggerButtonEventListeners = function () {
-        var _this = this;
-        fromEvent(window.document, 'keydown')
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(function (event) {
-            var _a;
-            var key = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            if (key === 'escape' && _this.isOpen) {
-                _this.closePicker();
-            }
-        });
-    };
-    SkyDatepickerComponent.prototype.removePickerEventListeners = function () {
-        /* istanbul ignore else */
-        if (this.calendarUnsubscribe) {
-            this.calendarUnsubscribe.next();
-            this.calendarUnsubscribe.complete();
-            this.calendarUnsubscribe = undefined;
-        }
-    };
-    SkyDatepickerComponent.ctorParameters = function () { return [
-        { type: SkyAffixService },
-        { type: ChangeDetectorRef },
-        { type: SkyCoreAdapterService },
-        { type: SkyOverlayService },
-        { type: SkyInputBoxHostService, decorators: [{ type: Optional }] },
-        { type: SkyThemeService, decorators: [{ type: Optional }] }
-    ]; };
-    __decorate([
-        Input()
-    ], SkyDatepickerComponent.prototype, "pickerClass", void 0);
-    __decorate([
-        ViewChild(SkyDatepickerCalendarComponent)
-    ], SkyDatepickerComponent.prototype, "calendar", void 0);
-    __decorate([
-        ViewChild('calendarRef', {
-            read: ElementRef
-        })
-    ], SkyDatepickerComponent.prototype, "calendarRef", null);
-    __decorate([
-        ViewChild('calendarTemplateRef', {
-            read: TemplateRef
-        })
-    ], SkyDatepickerComponent.prototype, "calendarTemplateRef", void 0);
-    __decorate([
-        ViewChild('triggerButtonRef', {
-            read: ElementRef
-        })
-    ], SkyDatepickerComponent.prototype, "triggerButtonRef", void 0);
-    __decorate([
-        ViewChild('inputTemplateRef', {
-            read: TemplateRef,
-            static: true
-        })
-    ], SkyDatepickerComponent.prototype, "inputTemplateRef", void 0);
-    __decorate([
-        ViewChild('triggerButtonTemplateRef', {
-            read: TemplateRef,
-            static: true
-        })
-    ], SkyDatepickerComponent.prototype, "triggerButtonTemplateRef", void 0);
-    SkyDatepickerComponent = __decorate([
-        Component({
-            selector: 'sky-datepicker',
-            template: "<div\n  class=\"sky-datepicker\"\n>\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div\n      class=\"sky-input-group\"\n    >\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div\n    class=\"sky-input-group-btn\"\n  >\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\"\n        icon=\"calendar\"\n        size=\"lg\"\n      ></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n",
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}"]
-        }),
-        __param(4, Optional()),
-        __param(5, Optional())
-    ], SkyDatepickerComponent);
-    return SkyDatepickerComponent;
-}());
-
-var moment$3 = moment_;
-// tslint:disable:no-forward-ref no-use-before-declare
-var SKY_DATEPICKER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(function () { return SkyDatepickerInputDirective; }),
-    multi: true
-};
-var SKY_DATEPICKER_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(function () { return SkyDatepickerInputDirective; }),
-    multi: true
-};
-// tslint:enable
-var SkyDatepickerInputDirective = /** @class */ (function () {
-    function SkyDatepickerInputDirective(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
-        var _this = this;
-        this.adapter = adapter;
-        this.changeDetector = changeDetector;
-        this.configService = configService;
-        this.elementRef = elementRef;
-        this.localeProvider = localeProvider;
-        this.renderer = renderer;
-        this.resourcesService = resourcesService;
-        this.datepickerComponent = datepickerComponent;
-        /**
-         * Indicates whether to disable date validation on the datepicker input.
-         * @default false
-         */
-        this.skyDatepickerNoValidate = false;
-        this.dateFormatter = new SkyDateFormatter();
-        this.isFirstChange = true;
-        this.ngUnsubscribe = new Subject();
-        this.onChange = function (_) { };
-        /*istanbul ignore next */
-        this.onTouched = function () { };
-        this.onValidatorChange = function () { };
-        this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
-        this.updatePlaceholder();
-        this.localeProvider.getLocaleInfo()
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(function (localeInfo) {
-            SkyDateFormatter.setLocale(localeInfo.locale);
-            _this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
-            _this.applyDateFormat();
-        });
-    }
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "dateFormat", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "strict", {
         get: function () {
-            return this._dateFormat ||
-                this.configService.dateFormat ||
-                this.preferredShortDateFormat;
+            return this._strict || false;
         },
         /**
-         * Specifies the date format for the input. Place this attribute on the `input` element
-         * to override the default in the `SkyDatepickerConfigService`.
-         * @default MM/DD/YYYY
+         * Indicates whether the format of the date value must match the format from the `dateFormat` value.
+         * If this property is `true` and the datepicker input directive cannot find an exact match, then
+         * the input is marked as invalid.
+         * If this property is `false` and the datepicker input directive cannot find an exact match, then
+         * it attempts to format the string based on the [ISO 8601 standard format](https://www.iso.org/iso-8601-date-and-time-format.html).
+         * @default false
          */
         set: function (value) {
-            if (value !== this._dateFormat) {
-                this._dateFormat = value;
-                this.applyDateFormat();
-            }
+            this._strict = value;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "disabled", {
+    Object.defineProperty(SkyDatepickerInputDirective.prototype, "value", {
         get: function () {
-            return this._disabled || false;
+            return this._value;
         },
-        /**
-         * Indicates whether to disable the datepicker.
-         * @default false
-         */
         set: function (value) {
-            this._disabled = value;
-            this.datepickerComponent.disabled = value;
-            this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "inputIsFocused", {
-        /**
-         * @internal
-         * Indicates if the input element or any of its children have focus.
-         */
-        get: function () {
-            return this.adapter.elementIsFocused();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "maxDate", {
-        get: function () {
-            return this._maxDate || this.configService.maxDate;
-        },
-        /**
-         * Specifies the latest date that is available in the calendar. Place this attribute on
-         * the `input` element to override the default in `SkyDatepickerConfigService`.
-         */
-        set: function (value) {
-            this._maxDate = value;
-            this.datepickerComponent.maxDate = this.maxDate;
-            this.onValidatorChange();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "minDate", {
-        get: function () {
-            return this._minDate || this.configService.minDate;
-        },
-        /**
-         * Specifies the earliest date that is available in the calendar. Place this attribute on
-         * the `input` element to override the default in `SkyDatepickerConfigService`.
-         */
-        set: function (value) {
-            this._minDate = value;
-            this.datepickerComponent.minDate = this.minDate;
-            this.onValidatorChange();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "skyDatepickerInput", {
-        /**
-         * Creates the datepicker input and calendar. Place this directive on an `input` element,
-         * and wrap the input in a `sky-datepicker` component. The value that users select is driven
-         * through the `ngModel` attribute specified on the `input` element.
-         * @required
-         */
-        set: function (value) {
-            if (value) {
-                console.warn('[Deprecation warning] You no longer need to provide a template reference variable ' +
-                    'to the `skyDatepickerInput` attribute (this will be a breaking change in the next ' +
-                    'major version release).\n' +
-                    'Do this instead:\n' +
-                    '<sky-datepicker>\n  <input skyDatepickerInput />\n</sky-datepicker>');
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "startingDay", {
-        get: function () {
-            return this._startingDay || this.configService.startingDay;
-        },
-        /**
-         * Specifies the starting day of the week in the calendar, where `0` sets the starting day
-         * to Sunday. Place this attribute on the `input` element to override the default
-         * in `SkyDatepickerConfigService`.
-         * @default 0
-         */
-        set: function (value) {
-            this._startingDay = value;
-            this.datepickerComponent.startingDay = this.startingDay;
-            this.onValidatorChange();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "strict", {
-        get: function () {
-            return this._strict || false;
-        },
-        /**
-         * Indicates whether the format of the date value must match the format from the `dateFormat` value.
-         * If this property is `true` and the datepicker input directive cannot find an exact match, then
-         * the input is marked as invalid.
-         * If this property is `false` and the datepicker input directive cannot find an exact match, then
-         * it attempts to format the string based on the [ISO 8601 standard format](https://www.iso.org/iso-8601-date-and-time-format.html).
-         * @default false
-         */
-        set: function (value) {
-            this._strict = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SkyDatepickerInputDirective.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        set: function (value) {
-            var dateValue = this.getDateValue(value);
-            var areDatesEqual = (this._value instanceof Date &&
-                dateValue &&
-                dateValue.getTime() === this._value.getTime());
-            var isValidDateString = this.isDateStringValid(value);
-            // If the string value supplied is malformed, do not set the value to its Date equivalent.
-            // (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
-            if (!isValidDateString) {
-                this._value = value;
-                this.notifyUpdatedValue();
-            }
-            else if (dateValue !== this._value || !areDatesEqual) {
-                this._value = (dateValue || value);
-                this.notifyUpdatedValue();
-            }
-            if (dateValue && isValidDateString) {
-                var formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
-                this.setInputElementValue(formattedDate);
-            }
-            else {
-                this.setInputElementValue(value || '');
-            }
+            var dateValue = this.getDateValue(value);
+            var areDatesEqual = (this._value instanceof Date &&
+                dateValue &&
+                dateValue.getTime() === this._value.getTime());
+            var isValidDateString = this.isDateStringValid(value);
+            // If the string value supplied is malformed, do not set the value to its Date equivalent.
+            // (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
+            if (!isValidDateString) {
+                this._value = value;
+                this.notifyUpdatedValue();
+            }
+            else if (dateValue !== this._value || !areDatesEqual) {
+                this._value = (dateValue || value);
+                this.notifyUpdatedValue();
+            }
+            if (dateValue && isValidDateString) {
+                var formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
+                this.setInputElementValue(formattedDate);
+            }
+            else {
+                this.setInputElementValue(value || '');
+            }
         },
         enumerable: true,
         configurable: true
@@ -2293,7 +2105,8 @@ var SkyFuzzyDatepickerInputDirective = /** @class */ (function () {
         this.localeProvider.getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(function (localeInfo) {
-            SkyDateFormatter.setLocale(localeInfo.locale);
+            _this.locale = localeInfo.locale;
+            SkyDateFormatter.setLocale(_this.locale);
             _this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
         });
     }
@@ -2311,7 +2124,7 @@ var SkyFuzzyDatepickerInputDirective = /** @class */ (function () {
         set: function (value) {
             this._dateFormat = value;
             if (this.value) {
-                var formattedDate = this.fuzzyDateService.getStringFromFuzzyDate(this.value, this.dateFormat);
+                var formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
                 this.setInputElementValue(formattedDate);
                 this.changeDetector.markForCheck();
             }
@@ -2448,8 +2261,11 @@ var SkyFuzzyDatepickerInputDirective = /** @class */ (function () {
                 fuzzyDate = this.fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
             }
             else if (typeof value === 'string') {
-                formattedDate = value;
                 fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+                formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
+                if (!formattedDate) {
+                    formattedDate = value;
+                }
                 fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
                 if (fuzzyMoment) {
                     dateValue = fuzzyMoment.toDate();
@@ -2457,7 +2273,7 @@ var SkyFuzzyDatepickerInputDirective = /** @class */ (function () {
             }
             else {
                 fuzzyDate = value;
-                formattedDate = this.fuzzyDateService.getStringFromFuzzyDate(fuzzyDate, this.dateFormat);
+                formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
                 fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
                 if (fuzzyMoment) {
                     dateValue = fuzzyMoment.toDate();
@@ -2479,267 +2295,811 @@ var SkyFuzzyDatepickerInputDirective = /** @class */ (function () {
                 }
                 this.datepickerComponent.selectedDate = dateValue;
             }
-            this.setInputElementValue(formattedDate || '');
+            this.setInputElementValue(formattedDate || '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SkyFuzzyDatepickerInputDirective.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this.yearRequired) {
+            if (this.dateFormat.toLowerCase().indexOf('y') === -1) {
+                throw new Error('You have configured conflicting settings. Year is required and dateFormat does not include year.');
+            }
+        }
+        if (!this.datepickerComponent) {
+            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
+                '`<sky-datepicker>` component!');
+        }
+        var element = this.elementRef.nativeElement;
+        this.renderer.addClass(element, 'sky-form-control');
+        var hasAriaLabel = element.getAttribute('aria-label');
+        if (!hasAriaLabel) {
+            this.resourcesService.getString('skyux_date_field_default_label')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(function (value) {
+                _this.renderer.setAttribute(element, 'aria-label', value);
+            });
+        }
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        this.datepickerComponent.dateChange
+            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+            .subscribe(function (value) {
+            _this.isFirstChange = false;
+            _this.value = value;
+            _this.onTouched();
+        });
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.ngAfterViewInit = function () {
+        // This is needed to address a bug in Angular 4.
+        // When a control value is set intially, its value is not represented on the view.
+        // See: https://github.com/angular/angular/issues/13792
+        // Of note is the parent check which allows us to determine if the form is reactive.
+        // Without this check there is a changed before checked error
+        /* istanbul ignore else */
+        var _this = this;
+        if (this.control && this.control.parent) {
+            setTimeout(function () {
+                _this.control.setValue(_this.value, {
+                    emitEvent: false
+                });
+                _this.changeDetector.markForCheck();
+            });
+        }
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.ngOnDestroy = function () {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.onInputChange = function (event) {
+        this.onValueChange(event.target.value);
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.onInputBlur = function () {
+        this.onTouched();
+        var formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
+        if (this.control.valid) {
+            this.setInputElementValue(formattedDate || '');
+        }
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.onInputKeyup = function () {
+        this.control.markAsDirty();
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.writeValue = function (value) {
+        this.value = value;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.validate = function (control) {
+        if (!this.control) {
+            this.control = control;
+        }
+        if (this.skyDatepickerNoValidate) {
+            return;
+        }
+        if (!this.control.value) {
+            return;
+        }
+        var value = control.value;
+        var fuzzyDate;
+        var validationError;
+        if (typeof value === 'string') {
+            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+        }
+        else {
+            fuzzyDate = value;
+        }
+        if (!fuzzyDate) {
+            validationError = {
+                'skyFuzzyDate': {
+                    invalid: value
+                }
+            };
+        }
+        if (!validationError && !fuzzyDate.year && this.yearRequired) {
+            validationError = {
+                'skyFuzzyDate': {
+                    yearRequired: value
+                }
+            };
+        }
+        if (!validationError && fuzzyDate.year) {
+            var fuzzyDateRange = void 0;
+            if (this.maxDate) {
+                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
+                if (!fuzzyDateRange.valid) {
+                    validationError = {
+                        'skyFuzzyDate': {
+                            maxDate: value
+                        }
+                    };
+                }
+            }
+            if (!validationError && this.minDate) {
+                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
+                if (!fuzzyDateRange.valid) {
+                    validationError = {
+                        'skyFuzzyDate': {
+                            minDate: value
+                        }
+                    };
+                }
+            }
+            if (!validationError && this.futureDisabled) {
+                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.fuzzyDateService.getCurrentFuzzyDate());
+                if (!fuzzyDateRange.valid) {
+                    validationError = {
+                        'skyFuzzyDate': {
+                            futureDisabled: value
+                        }
+                    };
+                }
+            }
+        }
+        if (validationError) {
+            // Mark the invalid control as touched so that the input's invalid CSS styles appear.
+            // (This is only required when the invalid value is set by the FormControl constructor.)
+            this.control.markAsTouched();
+        }
+        return validationError;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.registerOnChange = function (fn) {
+        this.onChange = fn;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.registerOnTouched = function (fn) {
+        this.onTouched = fn;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.registerOnValidatorChange = function (fn) {
+        this.onValidatorChange = fn;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.setDisabledState = function (disabled) {
+        this.disabled = disabled;
+        this.datepickerComponent.disabled = disabled;
+    };
+    /**
+     * Detects changes to the underlying input element's value and updates the ngModel accordingly.
+     * This is useful if you need to update the ngModel value before the input element loses focus.
+     */
+    SkyFuzzyDatepickerInputDirective.prototype.detectInputValueChange = function () {
+        this.onValueChange(this.elementRef.nativeElement.value);
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.onValueChange = function (newValue) {
+        this.isFirstChange = false;
+        this.value = newValue;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.setInputElementValue = function (value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.getMaxDate = function () {
+        if (this.maxDate) {
+            var maxDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
+            if (maxDate.isValid()) {
+                return maxDate.toDate();
+            }
+        }
+        else if (this.futureDisabled) {
+            return new Date();
+        }
+        return this.configService.maxDate;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.getMinDate = function () {
+        if (this.minDate) {
+            var minDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
+            if (minDate.isValid()) {
+                return minDate.toDate();
+            }
+        }
+        return this.configService.minDate;
+    };
+    SkyFuzzyDatepickerInputDirective.prototype.fuzzyDatesEqual = function (dateA, dateB) {
+        return dateA && dateB
+            && ((!dateA.day && !dateB.day)
+                || dateA.day === dateB.day)
+            && ((!dateA.month && !dateB.month)
+                || dateA.month === dateB.month)
+            && ((!dateA.year && !dateB.year)
+                || dateA.year === dateB.year);
+    };
+    SkyFuzzyDatepickerInputDirective.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: SkyDatepickerConfigService },
+        { type: ElementRef },
+        { type: SkyFuzzyDateService },
+        { type: SkyAppLocaleProvider },
+        { type: Renderer2 },
+        { type: SkyLibResourcesService },
+        { type: SkyDatepickerComponent, decorators: [{ type: Optional }] }
+    ]; };
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "dateFormat", null);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "disabled", null);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "futureDisabled", null);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "maxDate", null);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "minDate", null);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "skyDatepickerNoValidate", void 0);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "skyFuzzyDatepickerInput", null);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "startingDay", null);
+    __decorate([
+        Input()
+    ], SkyFuzzyDatepickerInputDirective.prototype, "yearRequired", null);
+    __decorate([
+        HostListener('change', ['$event'])
+    ], SkyFuzzyDatepickerInputDirective.prototype, "onInputChange", null);
+    __decorate([
+        HostListener('blur')
+    ], SkyFuzzyDatepickerInputDirective.prototype, "onInputBlur", null);
+    __decorate([
+        HostListener('keyup')
+    ], SkyFuzzyDatepickerInputDirective.prototype, "onInputKeyup", null);
+    SkyFuzzyDatepickerInputDirective = __decorate([
+        Directive({
+            selector: '[skyFuzzyDatepickerInput]',
+            providers: [
+                SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+                SKY_FUZZY_DATEPICKER_VALIDATOR
+            ]
+        }),
+        __param(7, Optional())
+    ], SkyFuzzyDatepickerInputDirective);
+    return SkyFuzzyDatepickerInputDirective;
+}());
+
+/**
+ * @internal
+ */
+var SkyDatepickerService = /** @class */ (function () {
+    function SkyDatepickerService() {
+        /**
+         * Specifies if a key date popover is currently displayed.
+         * Useful for communicating across all daypicker siblings when a popover is displayed.
+         */
+        this.keyDatePopoverStream = new Subject();
+    }
+    SkyDatepickerService = __decorate([
+        Injectable()
+    ], SkyDatepickerService);
+    return SkyDatepickerService;
+}());
+
+/**
+ * @internal
+ */
+var SkyDayPickerButtonComponent = /** @class */ (function () {
+    function SkyDayPickerButtonComponent(datepicker) {
+        this.datepicker = datepicker;
+    }
+    SkyDayPickerButtonComponent.ctorParameters = function () { return [
+        { type: SkyDatepickerCalendarInnerComponent }
+    ]; };
+    __decorate([
+        Input()
+    ], SkyDayPickerButtonComponent.prototype, "date", void 0);
+    SkyDayPickerButtonComponent = __decorate([
+        Component({
+            selector: 'sky-daypicker-button',
+            template: "<button\n  class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n  tabindex=\"-1\"\n  type=\"button\"\n  [disabled]=\"date.disabled\"\n  [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n  (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n>\n  <span\n    [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\"\n  >\n    {{date.label}}\n  </span>\n</button>\n",
+            styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date::before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date::before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date::before{left:12px}"]
+        })
+    ], SkyDayPickerButtonComponent);
+    return SkyDayPickerButtonComponent;
+}());
+
+/**
+ * @internal
+ */
+var SkyDayPickerCellComponent = /** @class */ (function () {
+    function SkyDayPickerCellComponent(datepicker, datepickerService) {
+        this.datepicker = datepicker;
+        this.datepickerService = datepickerService;
+        this.hasTooltip = false;
+        this.popoverController = new Subject();
+        this.activeUid = '';
+        this.cancelPopover = false;
+        this.popoverOpen = false;
+        this.ngUnsubscribe = new Subject();
+    }
+    SkyDayPickerCellComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.hasTooltip =
+            this.date.keyDate &&
+                this.date.keyDateText &&
+                this.date.keyDateText.length > 0 &&
+                this.date.keyDateText[0].length > 0;
+        // show the tooltip if this is the active date and is not the
+        // initial active date (activeDateHasChanged)
+        if (this.datepicker.isActive(this.date) &&
+            this.activeDateHasChanged &&
+            this.hasTooltip) {
+            this.activeUid = this.date.uid;
+            this.showTooltip();
+        }
+        if (this.hasTooltip) {
+            this.datepickerService.keyDatePopoverStream
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(function (date) {
+                if (date) {
+                    _this.activeUid = date.uid;
+                }
+                else {
+                    _this.activeUid = '';
+                }
+                // If this day has an open popover and they have moved off of the day close the popover.
+                if (_this.date.uid !== _this.activeUid) {
+                    _this.hideTooltip();
+                }
+            });
+        }
+    };
+    SkyDayPickerCellComponent.prototype.ngOnDestroy = function () {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    };
+    SkyDayPickerCellComponent.prototype.onDayMouseenter = function () {
+        this.cancelPopover = false;
+        if (this.hasTooltip) {
+            this.showTooltip();
+            this.datepickerService.keyDatePopoverStream.next(this.date);
+        }
+    };
+    SkyDayPickerCellComponent.prototype.onDayMouseleave = function () {
+        this.cancelPopover = true;
+        if (this.hasTooltip) {
+            this.hideTooltip();
+        }
+        this.datepickerService.keyDatePopoverStream.next(undefined);
+    };
+    SkyDayPickerCellComponent.prototype.onPopoverClosed = function () {
+        this.popoverOpen = false;
+    };
+    SkyDayPickerCellComponent.prototype.onPopoverOpened = function () {
+        this.popoverOpen = true;
+        /* istanbul ignore else */
+        if (this.cancelPopover) {
+            // If the popover gets opened just as a mouseout event happens, close it.
+            this.hideTooltip();
+            this.cancelPopover = false;
+        }
+    };
+    SkyDayPickerCellComponent.prototype.getKeyDateLabel = function () {
+        if (this.hasTooltip) {
+            return this.date.keyDateText.join(', ');
+        }
+        else {
+            return '';
+        }
+    };
+    SkyDayPickerCellComponent.prototype.hideTooltip = function () {
+        /* istanbul ignore else */
+        if (this.popoverOpen) {
+            this.popoverController.next({ type: SkyPopoverMessageType.Close });
+        }
+    };
+    SkyDayPickerCellComponent.prototype.showTooltip = function () {
+        var _this = this;
+        /* istanbul ignore else */
+        if (this.hasTooltip &&
+            !this.popoverOpen) {
+            /**
+             * Delay 1/2 second before opening the popover as long as mouse hasn't moved off the date.
+             */
+            setTimeout(function () {
+                if (!_this.cancelPopover &&
+                    _this.activeUid === _this.date.uid) {
+                    _this.popoverController.next({ type: SkyPopoverMessageType.Open });
+                }
+            }, 500);
+        }
+    };
+    SkyDayPickerCellComponent.ctorParameters = function () { return [
+        { type: SkyDatepickerCalendarInnerComponent },
+        { type: SkyDatepickerService }
+    ]; };
+    __decorate([
+        Input()
+    ], SkyDayPickerCellComponent.prototype, "activeDateHasChanged", void 0);
+    __decorate([
+        Input()
+    ], SkyDayPickerCellComponent.prototype, "date", void 0);
+    SkyDayPickerCellComponent = __decorate([
+        Component({
+            selector: 'sky-daypicker-cell',
+            template: "<div *ngIf=\"hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  [attr.aria-label]=\"getKeyDateLabel()\"\n  [skyPopover]=\"dayInfoPopover\"\n  skyPopoverPlacement=\"left\"\n  [skyPopoverMessageStream]=\"popoverController\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n  <sky-popover\n    (popoverClosed)=\"onPopoverClosed()\"\n    (popoverOpened)=\"onPopoverOpened()\"\n    #dayInfoPopover\n  >\n    <div *ngFor=\"let text of date.keyDateText\">\n      {{text}}\n    </div>\n  </sky-popover>\n</div>\n<div *ngIf=\"!hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n</div>\n\n<ng-template #daypickerButtonTemplateRef>\n  <sky-daypicker-button\n    [date]=\"date\"\n  >\n  </sky-daypicker-button>\n</ng-template>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush
+        })
+    ], SkyDayPickerCellComponent);
+    return SkyDayPickerCellComponent;
+}());
+
+/**
+ * @internal
+ */
+var SkyDayPickerComponent = /** @class */ (function () {
+    function SkyDayPickerComponent(datepicker) {
+        this.calendarDateRangeChange = new EventEmitter();
+        this.isWaiting = false;
+        this.labels = [];
+        this.rows = [];
+        this.weekNumbers = [];
+        this.activeDateHasChanged = false;
+        this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+        this.ngUnsubscribe = new Subject();
+        this.datepicker = datepicker;
+    }
+    Object.defineProperty(SkyDayPickerComponent.prototype, "customDates", {
+        set: function (value) {
+            /* istanbul ignore else */
+            if (value) {
+                this.applyCustomDates(value, this.rows);
+            }
         },
         enumerable: true,
         configurable: true
     });
-    SkyFuzzyDatepickerInputDirective.prototype.ngOnInit = function () {
+    SkyDayPickerComponent.prototype.ngOnInit = function () {
         var _this = this;
-        if (this.yearRequired) {
-            if (this.dateFormat.toLowerCase().indexOf('y') === -1) {
-                throw new Error('You have configured conflicting settings. Year is required and dateFormat does not include year.');
-            }
+        this.datepicker.stepDay = { months: 1 };
+        this.initialDate = this.datepicker.activeDate.getDate();
+        this.datepicker.setRefreshViewHandler(function () {
+            _this.refreshDayView();
+        }, 'day');
+        this.datepicker.setCompareHandler(this.compareDays, 'day');
+        this.datepicker.setKeydownHandler(function (key, event) {
+            _this.keydownDays(key, event);
+        }, 'day');
+        this.datepicker.refreshView();
+    };
+    SkyDayPickerComponent.prototype.ngOnDestroy = function () {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    };
+    SkyDayPickerComponent.prototype.getDates = function (startDate, n) {
+        var dates = new Array(n);
+        var current = new Date(startDate.getTime());
+        var i = 0;
+        var date;
+        while (i < n) {
+            date = new Date(current.getTime());
+            date = this.datepicker.fixTimeZone(date);
+            dates[i++] = date;
+            current = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
         }
-        if (!this.datepickerComponent) {
-            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
-                '`<sky-datepicker>` component!');
+        return dates;
+    };
+    SkyDayPickerComponent.prototype.compareDays = function (date1, date2) {
+        var d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        var d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        return d1.getTime() - d2.getTime();
+    };
+    SkyDayPickerComponent.prototype.refreshDayView = function () {
+        var year = this.datepicker.activeDate.getFullYear();
+        var month = this.datepicker.activeDate.getMonth();
+        var firstDayOfMonth = new Date(year, month, 1);
+        var difference = this.datepicker.startingDay - firstDayOfMonth.getDay();
+        var numDisplayedFromPreviousMonth = (difference > 0)
+            ? 7 - difference
+            : -difference;
+        var firstDate = new Date(firstDayOfMonth.getTime());
+        if (this.datepicker.activeDate.getDate() !== this.initialDate) {
+            this.activeDateHasChanged = true;
         }
-        var element = this.elementRef.nativeElement;
-        this.renderer.addClass(element, 'sky-form-control');
-        var hasAriaLabel = element.getAttribute('aria-label');
-        if (!hasAriaLabel) {
-            this.resourcesService.getString('skyux_date_field_default_label')
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(function (value) {
-                _this.renderer.setAttribute(element, 'aria-label', value);
+        /* istanbul ignore else */
+        /* sanity check */
+        if (numDisplayedFromPreviousMonth > 0) {
+            firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
+        }
+        // 42 is the number of days on a six-week calendar
+        var days = this.getDates(firstDate, 42);
+        var pickerDates = [];
+        for (var i = 0; i < 42; i++) {
+            var _dateObject = this.datepicker.createDateObject(days[i], this.datepicker.formatDay, days[i].getMonth() !== month, this.datepicker.datepickerId + '-' + i);
+            pickerDates[i] = _dateObject;
+        }
+        this.labels = [];
+        for (var j = 0; j < 7; j++) {
+            this.labels[j] = {};
+            this.labels[j].abbr =
+                this.datepicker.dateFilter(pickerDates[j].date, this.datepicker.formatDayHeader);
+            this.labels[j].full = this.datepicker.dateFilter(pickerDates[j].date, 'EEEE');
+        }
+        this.title =
+            this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
+        var oldDateRange = this.getDateRange(this.rows);
+        this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
+        var newDateRange = this.getDateRange(this.rows);
+        if (!this.dateRangeRowsAreEqual(oldDateRange, newDateRange)) {
+            this.calendarDateRangeChange.next({
+                startDate: newDateRange.startDate,
+                endDate: newDateRange.endDate
             });
         }
     };
-    SkyFuzzyDatepickerInputDirective.prototype.ngAfterContentInit = function () {
-        var _this = this;
-        this.datepickerComponent.dateChange
-            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
-            .subscribe(function (value) {
-            _this.isFirstChange = false;
-            _this.value = value;
-            _this.onTouched();
-        });
+    SkyDayPickerComponent.prototype.keydownDays = function (key, event) {
+        var date = this.datepicker.activeDate.getDate();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (key === 'left') {
+            date = date - 1;
+        }
+        else if (key === 'up') {
+            date = date - 7;
+        }
+        else if (key === 'right') {
+            date = date + 1;
+        }
+        else if (key === 'down') {
+            date = date + 7;
+        }
+        else if (key === 'pageup' || key === 'pagedown') {
+            var month = this.datepicker.activeDate.getMonth() + (key === 'pageup' ? -1 : 1);
+            this.datepicker.activeDate.setMonth(month, 1);
+            date =
+                Math.min(this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth()), date);
+        }
+        else if (key === 'home') {
+            date = 1;
+        }
+        else if (key === 'end') {
+            date = this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth());
+        }
+        this.datepicker.activeDate.setDate(date);
     };
-    SkyFuzzyDatepickerInputDirective.prototype.ngAfterViewInit = function () {
-        // This is needed to address a bug in Angular 4.
-        // When a control value is set intially, its value is not represented on the view.
-        // See: https://github.com/angular/angular/issues/13792
-        // Of note is the parent check which allows us to determine if the form is reactive.
-        // Without this check there is a changed before checked error
+    SkyDayPickerComponent.prototype.getDaysInMonth = function (year, month) {
+        return month === 1 && year % 4 === 0 &&
+            (year % 400 === 0 || year % 100 !== 0) ? 29 : this.daysInMonth[month];
+    };
+    /**
+     * Applies custom date properties to the existing dates displayed in the calendar.
+     */
+    SkyDayPickerComponent.prototype.applyCustomDates = function (customDates, dateRows) {
+        var date;
+        var newDate;
+        var dateIndex;
         /* istanbul ignore else */
-        var _this = this;
-        if (this.control && this.control.parent) {
-            setTimeout(function () {
-                _this.control.setValue(_this.value, {
-                    emitEvent: false
+        if (customDates && dateRows) {
+            customDates.forEach(function (customDate) {
+                dateIndex = -1;
+                dateRows.forEach(function (row) {
+                    if (dateIndex === -1) {
+                        dateIndex = row.findIndex(function (d) {
+                            return d.date.getTime() === customDate.date.getTime();
+                        });
+                        if (dateIndex > -1) {
+                            date = row[dateIndex];
+                            // Replace the date with a new instance so the display gets updated.
+                            newDate = {
+                                current: date.current,
+                                date: date.date,
+                                disabled: !!date.disabled || !!customDate.disabled,
+                                keyDate: !!customDate.keyDate || !!date.keyDate,
+                                keyDateText: customDate.keyDateText || date.keyDateText,
+                                label: date.label,
+                                secondary: date.secondary,
+                                selected: date.selected,
+                                uid: date.uid
+                            };
+                            row[dateIndex] = newDate;
+                        }
+                    }
                 });
-                _this.changeDetector.markForCheck();
             });
         }
     };
-    SkyFuzzyDatepickerInputDirective.prototype.ngOnDestroy = function () {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    };
-    SkyFuzzyDatepickerInputDirective.prototype.onInputChange = function (event) {
-        this.onValueChange(event.target.value);
+    SkyDayPickerComponent.prototype.dateRangeRowsAreEqual = function (rangeA, rangeB) {
+        /* istanbul ignore if */
+        if (!rangeA && !rangeB) {
+            return true;
+        }
+        else if ((rangeA && !rangeB) || (!rangeA && rangeB)) {
+            return false;
+        }
+        return this.compareDays(rangeA.startDate, rangeB.startDate) === 0 &&
+            this.compareDays(rangeA.endDate, rangeB.endDate) === 0;
     };
-    SkyFuzzyDatepickerInputDirective.prototype.onInputBlur = function () {
-        this.onTouched();
-        var formattedDate = this.fuzzyDateService.getStringFromFuzzyDate(this.value, this.dateFormat);
-        if (this.control.valid) {
-            this.setInputElementValue(formattedDate || '');
+    SkyDayPickerComponent.prototype.getDateRange = function (rows) {
+        if (rows && rows.length > 0) {
+            return {
+                startDate: rows[0][0].date,
+                endDate: rows[rows.length - 1][rows[rows.length - 1].length - 1].date
+            };
         }
     };
-    SkyFuzzyDatepickerInputDirective.prototype.onInputKeyup = function () {
-        this.control.markAsDirty();
+    SkyDayPickerComponent.ctorParameters = function () { return [
+        { type: SkyDatepickerCalendarInnerComponent }
+    ]; };
+    __decorate([
+        Input()
+    ], SkyDayPickerComponent.prototype, "customDates", null);
+    __decorate([
+        Output()
+    ], SkyDayPickerComponent.prototype, "calendarDateRangeChange", void 0);
+    __decorate([
+        Input()
+    ], SkyDayPickerComponent.prototype, "isWaiting", void 0);
+    SkyDayPickerComponent = __decorate([
+        Component({
+            selector: 'sky-daypicker',
+            template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\n  class=\"sky-daypicker-wrapper\"\n>\n    <table\n      class=\"sky-daypicker-table\"\n      role=\"grid\"\n      [attr.aria-labelledby]=\"datepicker.datepickerId+'-title'\"\n      [attr.aria-activedescendant]=\"datepicker.activeDateId\"\n    >\n      <thead>\n        <tr>\n          <th\n            class=\"sky-datepicker-header-left\"\n            scope=\"col\"\n          >\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n              (click)=\"datepicker.moveCalendar($event, -1)\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              >\n              <sky-icon\n                class=\"sky-datepicker-chevron-default\"\n                icon=\"chevron-left\"\n              ></sky-icon>\n              <sky-icon\n                class=\"sky-datepicker-chevron-modern\"\n                icon=\"chevron-left\"\n                iconType=\"skyux\"\n              ></sky-icon>\n            </button>\n          </th>\n          <th\n            scope=\"col\"\n            [attr.colspan]=\"5\"\n          >\n            <button\n              [id]=\"datepicker.datepickerId + '-title'\"\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n              (click)=\"datepicker.toggleModeCalendar($event)\"\n              [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n              [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              >\n              <strong>{{title}}</strong>\n            </button>\n          </th>\n          <th\n            class=\"sky-datepicker-header-right\"\n            scope=\"col\"\n          >\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n              (click)=\"datepicker.moveCalendar($event, 1)\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              >\n              <sky-icon\n                class=\"sky-datepicker-chevron-default\"\n                icon=\"chevron-right\"\n              ></sky-icon>\n              <sky-icon\n                class=\"sky-datepicker-chevron-modern\"\n                icon=\"chevron-right\"\n                iconType=\"skyux\"\n              ></sky-icon>\n            </button>\n          </th>\n        </tr>\n        <tr>\n          <th\n            scope=\"col\"\n            *ngFor=\"let label of labels\"\n            class=\"sky-datepicker-center sky-datepicker-weekdays\">\n            <small [attr.aria-label]=\"label.full\">\n              <b>{{label.abbr}}</b>\n            </small>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <!-- Wait indicator for async custom date stream -->\n        <sky-wait\n          [isWaiting]=\"isWaiting\"\n        >\n        </sky-wait>\n          <ng-template\n            ngFor\n            [ngForOf]=\"rows\"\n            let-row=\"$implicit\"\n            let-index=\"index\"\n            >\n            <tr role=\"row\">\n              <td *ngFor=\"let date of row\"\n                class=\"sky-datepicker-center\"\n                role=\"gridcell\"\n                [id]=\"date.uid\"\n              >\n              <sky-daypicker-cell\n                [activeDateHasChanged]=\"activeDateHasChanged\"\n                [date]=\"date\"\n              >\n              </sky-daypicker-cell>\n            </td>\n          </tr>\n          </ng-template>\n      </tbody>\n    </table>\n</div>\n",
+            styles: [":host-context(.sky-theme-modern) :host:focus{outline:0}.sky-theme-modern :host:focus{outline:0}"]
+        })
+    ], SkyDayPickerComponent);
+    return SkyDayPickerComponent;
+}());
+
+/**
+ * @internal
+ */
+var SkyMonthPickerComponent = /** @class */ (function () {
+    function SkyMonthPickerComponent(datepicker) {
+        this.rows = [];
+        this.datepicker = datepicker;
+    }
+    SkyMonthPickerComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.datepicker.stepMonth = {
+            years: 1
+        };
+        this.datepicker.setRefreshViewHandler(function () {
+            _this.refreshMonthView();
+        }, 'month');
+        this.datepicker.setCompareHandler(this.compareMonth, 'month');
+        this.datepicker.refreshView();
+        this.datepicker.setKeydownHandler(function (key, event) {
+            _this.keydownMonths(key, event);
+        }, 'month');
     };
-    SkyFuzzyDatepickerInputDirective.prototype.writeValue = function (value) {
-        this.value = value;
+    SkyMonthPickerComponent.prototype.compareMonth = function (date1, date2) {
+        var d1 = new Date(date1.getFullYear(), date1.getMonth());
+        var d2 = new Date(date2.getFullYear(), date2.getMonth());
+        return d1.getTime() - d2.getTime();
     };
-    SkyFuzzyDatepickerInputDirective.prototype.validate = function (control) {
-        if (!this.control) {
-            this.control = control;
-        }
-        if (this.skyDatepickerNoValidate) {
-            return;
-        }
-        if (!this.control.value) {
-            return;
+    SkyMonthPickerComponent.prototype.refreshMonthView = function () {
+        var months = new Array(12);
+        var year = this.datepicker.activeDate.getFullYear();
+        var date;
+        for (var i = 0; i < 12; i++) {
+            date = new Date(year, i, 1);
+            date = this.datepicker.fixTimeZone(date);
+            months[i] =
+                this.datepicker.createDateObject(date, this.datepicker.formatMonth, false, this.datepicker.datepickerId + '-' + i);
         }
-        var value = control.value;
-        var fuzzyDate;
-        var validationError;
-        if (typeof value === 'string') {
-            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+        this.title =
+            this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatMonthTitle);
+        this.rows = this.datepicker.createCalendarRows(months, this.datepicker.monthColLimit);
+    };
+    SkyMonthPickerComponent.prototype.keydownMonths = function (key, event) {
+        var date = this.datepicker.activeDate.getMonth();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (key === 'left') {
+            date = date - 1;
         }
-        else {
-            fuzzyDate = value;
+        else if (key === 'up') {
+            date = date - this.datepicker.monthColLimit;
         }
-        if (!fuzzyDate) {
-            validationError = {
-                'skyFuzzyDate': {
-                    invalid: value
-                }
-            };
+        else if (key === 'right') {
+            date = date + 1;
         }
-        if (!validationError && !fuzzyDate.year && this.yearRequired) {
-            validationError = {
-                'skyFuzzyDate': {
-                    yearRequired: value
-                }
-            };
+        else if (key === 'down') {
+            date = date + this.datepicker.monthColLimit;
         }
-        if (!validationError && fuzzyDate.year) {
-            var fuzzyDateRange = void 0;
-            if (this.maxDate) {
-                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
-                if (!fuzzyDateRange.valid) {
-                    validationError = {
-                        'skyFuzzyDate': {
-                            maxDate: value
-                        }
-                    };
-                }
-            }
-            if (!validationError && this.minDate) {
-                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
-                if (!fuzzyDateRange.valid) {
-                    validationError = {
-                        'skyFuzzyDate': {
-                            minDate: value
-                        }
-                    };
-                }
-            }
-            if (!validationError && this.futureDisabled) {
-                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.fuzzyDateService.getCurrentFuzzyDate());
-                if (!fuzzyDateRange.valid) {
-                    validationError = {
-                        'skyFuzzyDate': {
-                            futureDisabled: value
-                        }
-                    };
-                }
-            }
+        else if (key === 'pageup' || key === 'pagedown') {
+            var year = this.datepicker.activeDate.getFullYear() + (key === 'pageup' ? -1 : 1);
+            this.datepicker.activeDate.setFullYear(year);
         }
-        if (validationError) {
-            // Mark the invalid control as touched so that the input's invalid CSS styles appear.
-            // (This is only required when the invalid value is set by the FormControl constructor.)
-            this.control.markAsTouched();
+        else if (key === 'home') {
+            date = 0;
         }
-        return validationError;
-    };
-    SkyFuzzyDatepickerInputDirective.prototype.registerOnChange = function (fn) {
-        this.onChange = fn;
-    };
-    SkyFuzzyDatepickerInputDirective.prototype.registerOnTouched = function (fn) {
-        this.onTouched = fn;
-    };
-    SkyFuzzyDatepickerInputDirective.prototype.registerOnValidatorChange = function (fn) {
-        this.onValidatorChange = fn;
+        else if (key === 'end') {
+            date = 11;
+        }
+        this.datepicker.activeDate.setMonth(date);
     };
-    SkyFuzzyDatepickerInputDirective.prototype.setDisabledState = function (disabled) {
-        this.disabled = disabled;
-        this.datepickerComponent.disabled = disabled;
+    SkyMonthPickerComponent.ctorParameters = function () { return [
+        { type: SkyDatepickerCalendarInnerComponent }
+    ]; };
+    SkyMonthPickerComponent = __decorate([
+        Component({
+            selector: 'sky-monthpicker',
+            template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button></th>\n      <th [attr.colspan]=\"((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"text-center\"\n        role=\"gridcell\"\n        id=\"{{date.uid}}\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span [ngClass]=\"{'sky-datepicker-current': date.current}\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n",
+            styles: [":host-context(.sky-theme-modern) :host:focus{outline:0}.sky-theme-modern :host:focus{outline:0}"]
+        })
+    ], SkyMonthPickerComponent);
+    return SkyMonthPickerComponent;
+}());
+
+/**
+ * @internal
+ */
+var SkyYearPickerComponent = /** @class */ (function () {
+    function SkyYearPickerComponent(datepicker) {
+        this.rows = [];
+        this.datepicker = datepicker;
+    }
+    SkyYearPickerComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.datepicker.stepYear = { years: this.datepicker.yearRange };
+        this.datepicker.setRefreshViewHandler(function () {
+            _this.refreshYearView();
+        }, 'year');
+        this.datepicker.setCompareHandler(this.compareYears, 'year');
+        this.datepicker.setKeydownHandler(function (key, event) {
+            _this.keydownYears(key, event);
+        }, 'year');
+        this.datepicker.refreshView();
     };
-    /**
-     * Detects changes to the underlying input element's value and updates the ngModel accordingly.
-     * This is useful if you need to update the ngModel value before the input element loses focus.
-     */
-    SkyFuzzyDatepickerInputDirective.prototype.detectInputValueChange = function () {
-        this.onValueChange(this.elementRef.nativeElement.value);
+    SkyYearPickerComponent.prototype.getStartingYear = function (year) {
+        return Math.floor((year - 1) / this.datepicker.yearRange) * this.datepicker.yearRange + 1;
     };
-    SkyFuzzyDatepickerInputDirective.prototype.onValueChange = function (newValue) {
-        this.isFirstChange = false;
-        this.value = newValue;
+    SkyYearPickerComponent.prototype.compareYears = function (date1, date2) {
+        return date1.getFullYear() - date2.getFullYear();
     };
-    SkyFuzzyDatepickerInputDirective.prototype.setInputElementValue = function (value) {
-        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+    SkyYearPickerComponent.prototype.refreshYearView = function () {
+        var years = new Array(this.datepicker.yearRange);
+        var date;
+        var start = this.getStartingYear(this.datepicker.activeDate.getFullYear());
+        for (var i = 0; i < this.datepicker.yearRange; i++) {
+            date = new Date(this.datepicker.activeDate);
+            date.setFullYear(start + i, 0, 1);
+            years[i] =
+                this.datepicker.createDateObject(date, this.datepicker.formatYear, false, this.datepicker.datepickerId + '-' + i);
+        }
+        this.title = [years[0].label,
+            years[this.datepicker.yearRange - 1].label].join(' - ');
+        this.rows = this.datepicker.createCalendarRows(years, this.datepicker.yearColLimit);
     };
-    SkyFuzzyDatepickerInputDirective.prototype.getMaxDate = function () {
-        if (this.maxDate) {
-            var maxDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
-            if (maxDate.isValid()) {
-                return maxDate.toDate();
-            }
+    SkyYearPickerComponent.prototype.keydownYears = function (key, event) {
+        var date = this.datepicker.activeDate.getFullYear();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (key === 'left') {
+            date = date - 1;
         }
-        else if (this.futureDisabled) {
-            return new Date();
+        else if (key === 'up') {
+            date = date - this.datepicker.yearColLimit;
         }
-        return this.configService.maxDate;
-    };
-    SkyFuzzyDatepickerInputDirective.prototype.getMinDate = function () {
-        if (this.minDate) {
-            var minDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
-            if (minDate.isValid()) {
-                return minDate.toDate();
-            }
+        else if (key === 'right') {
+            date = date + 1;
         }
-        return this.configService.minDate;
-    };
-    SkyFuzzyDatepickerInputDirective.prototype.fuzzyDatesEqual = function (dateA, dateB) {
-        return dateA && dateB
-            && ((!dateA.day && !dateB.day)
-                || dateA.day === dateB.day)
-            && ((!dateA.month && !dateB.month)
-                || dateA.month === dateB.month)
-            && ((!dateA.year && !dateB.year)
-                || dateA.year === dateB.year);
+        else if (key === 'down') {
+            date = date + this.datepicker.yearColLimit;
+        }
+        else if (key === 'pageup' || key === 'pagedown') {
+            date += (key === 'pageup' ? -1 : 1) * this.datepicker.yearRange;
+        }
+        else if (key === 'home') {
+            date = this.getStartingYear(this.datepicker.activeDate.getFullYear());
+        }
+        else if (key === 'end') {
+            date
+                = this.getStartingYear(this.datepicker.activeDate.getFullYear()) + this.datepicker.yearRange - 1;
+        }
+        this.datepicker.activeDate.setFullYear(date);
     };
-    SkyFuzzyDatepickerInputDirective.ctorParameters = function () { return [
-        { type: ChangeDetectorRef },
-        { type: SkyDatepickerConfigService },
-        { type: ElementRef },
-        { type: SkyFuzzyDateService },
-        { type: SkyAppLocaleProvider },
-        { type: Renderer2 },
-        { type: SkyLibResourcesService },
-        { type: SkyDatepickerComponent, decorators: [{ type: Optional }] }
+    SkyYearPickerComponent.ctorParameters = function () { return [
+        { type: SkyDatepickerCalendarInnerComponent }
     ]; };
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "dateFormat", null);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "disabled", null);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "futureDisabled", null);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "maxDate", null);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "minDate", null);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "skyDatepickerNoValidate", void 0);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "skyFuzzyDatepickerInput", null);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "startingDay", null);
-    __decorate([
-        Input()
-    ], SkyFuzzyDatepickerInputDirective.prototype, "yearRequired", null);
-    __decorate([
-        HostListener('change', ['$event'])
-    ], SkyFuzzyDatepickerInputDirective.prototype, "onInputChange", null);
-    __decorate([
-        HostListener('blur')
-    ], SkyFuzzyDatepickerInputDirective.prototype, "onInputBlur", null);
-    __decorate([
-        HostListener('keyup')
-    ], SkyFuzzyDatepickerInputDirective.prototype, "onInputKeyup", null);
-    SkyFuzzyDatepickerInputDirective = __decorate([
-        Directive({
-            selector: '[skyFuzzyDatepickerInput]',
-            providers: [
-                SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-                SKY_FUZZY_DATEPICKER_VALIDATOR
-            ]
-        }),
-        __param(7, Optional())
-    ], SkyFuzzyDatepickerInputDirective);
-    return SkyFuzzyDatepickerInputDirective;
+    SkyYearPickerComponent = __decorate([
+        Component({
+            selector: 'sky-yearpicker',
+            template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th [attr.colspan]=\"((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"sky-datepicker-row\"\n        role=\"gridcell\"\n        >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span\n            [ngClass]=\"{'sky-datepicker-current': date.current }\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n",
+            styles: [":host-context(.sky-theme-modern) :host:focus{outline:0}.sky-theme-modern :host:focus{outline:0}"]
+        })
+    ], SkyYearPickerComponent);
+    return SkyYearPickerComponent;
 }());
 
 var SkyDatepickerModule = /** @class */ (function () {
@@ -2755,7 +3115,9 @@ var SkyDatepickerModule = /** @class */ (function () {
                 SkyYearPickerComponent,
                 SkyDatepickerComponent,
                 SkyDatepickerInputDirective,
-                SkyFuzzyDatepickerInputDirective
+                SkyFuzzyDatepickerInputDirective,
+                SkyDayPickerCellComponent,
+                SkyDayPickerButtonComponent
             ],
             imports: [
                 CommonModule,
@@ -2765,7 +3127,9 @@ var SkyDatepickerModule = /** @class */ (function () {
                 SkyDateTimeResourcesModule,
                 SkyAffixModule,
                 SkyOverlayModule,
-                SkyThemeModule
+                SkyThemeModule,
+                SkyPopoverModule,
+                SkyWaitModule
             ],
             exports: [
                 SkyDatepickerCalendarComponent,
@@ -2775,14 +3139,17 @@ var SkyDatepickerModule = /** @class */ (function () {
                 SkyYearPickerComponent,
                 SkyDatepickerComponent,
                 SkyDatepickerInputDirective,
-                SkyFuzzyDatepickerInputDirective
+                SkyFuzzyDatepickerInputDirective,
+                SkyDayPickerCellComponent,
+                SkyDayPickerButtonComponent
             ],
             providers: [
                 SkyAppWindowRef,
                 SkyDatepickerConfigService,
                 SkyFuzzyDateService,
                 SkyCoreAdapterService,
-                SkyThemeService
+                SkyThemeService,
+                SkyDatepickerService
             ]
         })
     ], SkyDatepickerModule);
@@ -3911,7 +4278,7 @@ var SkyDateRangePickerComponent = /** @class */ (function () {
                 SKY_DATE_RANGE_PICKER_VALIDATOR
             ],
             changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-lg) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-xs) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width:768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-lg) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}.sky-theme-modern .sky-date-range-picker-form-group,:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width:768px){.sky-theme-modern .sky-date-range-picker-form-group,:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern.sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern.sky-responsive-container-lg) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern.sky-responsive-container-sm) .sky-date-range-picker-form-group{margin:0 20px 0 0}"]
+            styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-lg) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-xs) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width:768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-lg) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width:768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern.sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern.sky-responsive-container-lg) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern.sky-responsive-container-sm) .sky-date-range-picker-form-group{margin:0 20px 0 0}"]
         }),
         __param(5, Optional())
     ], SkyDateRangePickerComponent);
@@ -4071,7 +4438,8 @@ var SkyTimepickerInputDirective = /** @class */ (function () {
     SkyTimepickerInputDirective.prototype.onChange = function (event) {
         this.writeValue(event.target.value);
     };
-    SkyTimepickerInputDirective.prototype.onBlur /* istanbul ignore next */ = function () {
+    SkyTimepickerInputDirective.prototype.onBlur = function () {
+        /* istanbul ignore next */
         this._onTouched();
     };
     SkyTimepickerInputDirective.prototype.registerOnChange = function (fn) { this._onChange = fn; };
@@ -4347,7 +4715,7 @@ var SkyTimepickerComponent = /** @class */ (function () {
     });
     SkyTimepickerComponent.prototype.ngOnInit = function () {
         this.setFormat(this.timeFormat);
-        this.addTriggerButtonEventListeners();
+        this.addKeydownListner();
         if (this.inputBoxHostService) {
             this.inputBoxHostService.populate({
                 inputTemplate: this.inputTemplateRef,
@@ -4488,6 +4856,7 @@ var SkyTimepickerComponent = /** @class */ (function () {
                 _this.closePicker();
             }
         });
+        this.addKeydownListner();
         overlay.attachTemplate(this.timepickerTemplateRef);
         this.overlay = overlay;
     };
@@ -4498,9 +4867,9 @@ var SkyTimepickerComponent = /** @class */ (function () {
             this.overlay = undefined;
         }
     };
-    SkyTimepickerComponent.prototype.addTriggerButtonEventListeners = function () {
+    SkyTimepickerComponent.prototype.addKeydownListner = function () {
         var _this = this;
-        fromEvent(window.document, 'keydown')
+        this.overlayKeydownListner = fromEvent(window.document, 'keydown')
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(function (event) {
             var _a;
@@ -4512,12 +4881,14 @@ var SkyTimepickerComponent = /** @class */ (function () {
         });
     };
     SkyTimepickerComponent.prototype.removePickerEventListeners = function () {
+        var _a;
         /* istanbul ignore else */
         if (this.timepickerUnsubscribe) {
             this.timepickerUnsubscribe.next();
             this.timepickerUnsubscribe.complete();
             this.timepickerUnsubscribe = undefined;
         }
+        (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     };
     SkyTimepickerComponent.ctorParameters = function () { return [
         { type: SkyAffixService },
@@ -4606,5 +4977,5 @@ var SkyTimepickerModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { SkyDatePipe, SkyDatePipeModule, SkyDateRangeCalculatorId, SkyDateRangeCalculatorType, SkyDateRangePickerModule, SkyDateRangeService, SkyDatepickerConfigService, SkyDatepickerModule, SkyFuzzyDatePipe, SkyFuzzyDateService, SkyTimepickerModule, SkyDateTimeResourcesModule as ɵa, SkyDateTimeResourcesProvider as ɵb, SkyDateRangePickerComponent as ɵc, SkyDatepickerCalendarComponent as ɵd, SkyDatepickerAdapterService as ɵe, SkyDatepickerCalendarInnerComponent as ɵf, SkyDayPickerComponent as ɵg, SkyMonthPickerComponent as ɵh, SkyYearPickerComponent as ɵi, SkyDatepickerComponent as ɵj, SkyDatepickerInputDirective as ɵk, SkyFuzzyDatepickerInputDirective as ɵl, SkyTimepickerInputDirective as ɵm, SkyTimepickerComponent as ɵn };
+export { SkyDatePipe, SkyDatePipeModule, SkyDateRangeCalculatorId, SkyDateRangeCalculatorType, SkyDateRangePickerModule, SkyDateRangeService, SkyDatepickerConfigService, SkyDatepickerModule, SkyFuzzyDatePipe, SkyFuzzyDateService, SkyTimepickerModule, SkyDateTimeResourcesModule as ɵa, SkyDateTimeResourcesProvider as ɵb, SkyDateRangePickerComponent as ɵc, SkyDatepickerCalendarComponent as ɵd, SkyDatepickerAdapterService as ɵe, SkyDatepickerCalendarInnerComponent as ɵf, SkyDayPickerComponent as ɵg, SkyMonthPickerComponent as ɵh, SkyYearPickerComponent as ɵi, SkyDatepickerComponent as ɵj, SkyDatepickerInputDirective as ɵk, SkyFuzzyDatepickerInputDirective as ɵl, SkyDayPickerCellComponent as ɵm, SkyDatepickerService as ɵn, SkyDayPickerButtonComponent as ɵo, SkyTimepickerInputDirective as ɵp, SkyTimepickerComponent as ɵq };
 //# sourceMappingURL=skyux-datetime.js.map