@skyux/datetime 4.12.3 → 4.13.0

package/bundles/skyux-datetime.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/indicators'), require('@skyux/theme')) :
-    typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', '@skyux/i18n', 'rxjs', 'rxjs/operators', 'moment', '@angular/common', '@angular/forms', '@skyux/core', '@skyux/forms', '@skyux/indicators', '@skyux/theme'], factory) :
-    (global = global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.i18n, global.rxjs, global.rxjs.operators, global.moment_, global.ng.common, global.ng.forms, global.core$1, global.forms$1, global.indicators, global.theme));
-}(this, (function (exports, core, i18n, rxjs, operators, moment_, common, forms, core$1, forms$1, indicators, theme) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/popovers')) :
+    typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', '@skyux/i18n', 'rxjs', 'rxjs/operators', 'moment', '@angular/common', '@angular/forms', '@skyux/core', '@skyux/forms', '@skyux/indicators', '@skyux/theme', '@skyux/popovers'], factory) :
+    (global = global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.i18n, global.rxjs, global.rxjs.operators, global.moment_, global.ng.common, global.ng.forms, global.core$1, global.forms$1, global.indicators, global.theme, global.popovers));
+}(this, (function (exports, core, i18n, rxjs, operators, moment_, common, forms, core$1, forms$1, indicators, theme, popovers) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -1047,6 +1047,7 @@
                 39: 'right',
                 40: 'down'
             };
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         Object.defineProperty(SkyDatepickerCalendarInnerComponent.prototype, "selectedDate", {
             get: function () {
@@ -1072,6 +1073,10 @@
         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;
@@ -1175,6 +1180,7 @@
             }
         };
         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),
@@ -1182,7 +1188,9 @@
                 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;
         };
@@ -1269,10 +1277,27 @@
                 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([
+            core.Input()
+        ], SkyDatepickerCalendarInnerComponent.prototype, "customDates", void 0);
         __decorate([
             core.Input()
         ], SkyDatepickerCalendarInnerComponent.prototype, "startingDay", void 0);
@@ -1326,6 +1351,7 @@
             this.config = config;
             this.elementRef = elementRef;
             this.selectedDateChange = new core.EventEmitter(undefined);
+            this.calendarDateRangeChange = new core.EventEmitter();
             this.calendarModeChange = new core.EventEmitter();
             this._now = new Date();
             this.formatter = new SkyDateFormatter();
@@ -1359,6 +1385,9 @@
         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);
         };
@@ -1386,6 +1415,12 @@
             { type: SkyDatepickerConfigService },
             { type: core.ElementRef }
         ]; };
+        __decorate([
+            core.Input()
+        ], SkyDatepickerCalendarComponent.prototype, "customDates", void 0);
+        __decorate([
+            core.Input()
+        ], SkyDatepickerCalendarComponent.prototype, "isDaypickerWaiting", void 0);
         __decorate([
             core.Input()
         ], SkyDatepickerCalendarComponent.prototype, "minDate", void 0);
@@ -1401,6 +1436,9 @@
         __decorate([
             core.Output()
         ], SkyDatepickerCalendarComponent.prototype, "selectedDateChange", void 0);
+        __decorate([
+            core.Output()
+        ], SkyDatepickerCalendarComponent.prototype, "calendarDateRangeChange", void 0);
         __decorate([
             core.Output()
         ], SkyDatepickerCalendarComponent.prototype, "calendarModeChange", void 0);
@@ -1413,7 +1451,7 @@
         SkyDatepickerCalendarComponent = __decorate([
             core.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}"]
             })
@@ -1421,796 +1459,557 @@
         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 core.EventEmitter();
+            this.dateChange = new core.EventEmitter();
+            this.isDaypickerWaiting = false;
+            this.isOpen = false;
+            this.isVisible = false;
+            this.ngUnsubscribe = new rxjs.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(operators.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;
-            }
-            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);
+            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(operators.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 === '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([
-            core.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: [":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 () {
+        SkyDatepickerComponent.prototype.openPicker = function () {
+            this.isVisible = false;
+            this.changeDetector.markForCheck();
+            this.removePickerEventListeners();
+            this.calendarUnsubscribe = new rxjs.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(operators.takeUntil(this.calendarUnsubscribe))
+                .subscribe(function (change) {
+                _this.isVisible = (change.placement !== null);
+                _this.changeDetector.markForCheck();
+            });
+            affixer.affixTo(this.triggerButtonRef.nativeElement, {
+                autoFitContext: core$1.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(operators.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 = rxjs.fromEvent(window.document, 'keydown')
+                .pipe(operators.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: core$1.SkyAffixService },
+            { type: core.ChangeDetectorRef },
+            { type: core$1.SkyCoreAdapterService },
+            { type: core$1.SkyOverlayService },
+            { type: forms$1.SkyInputBoxHostService, decorators: [{ type: core.Optional }] },
+            { type: theme.SkyThemeService, decorators: [{ type: core.Optional }] }
         ]; };
-        SkyMonthPickerComponent = __decorate([
-            core.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}"]
+        __decorate([
+            core.Input()
+        ], SkyDatepickerComponent.prototype, "pickerClass", void 0);
+        __decorate([
+            core.Output()
+        ], SkyDatepickerComponent.prototype, "calendarDateRangeChange", void 0);
+        __decorate([
+            core.ViewChild(SkyDatepickerCalendarComponent)
+        ], SkyDatepickerComponent.prototype, "calendar", void 0);
+        __decorate([
+            core.ViewChild('calendarRef', {
+                read: core.ElementRef
             })
-        ], SkyMonthPickerComponent);
-        return SkyMonthPickerComponent;
+        ], SkyDatepickerComponent.prototype, "calendarRef", null);
+        __decorate([
+            core.ViewChild('calendarTemplateRef', {
+                read: core.TemplateRef
+            })
+        ], SkyDatepickerComponent.prototype, "calendarTemplateRef", void 0);
+        __decorate([
+            core.ViewChild('triggerButtonRef', {
+                read: core.ElementRef
+            })
+        ], SkyDatepickerComponent.prototype, "triggerButtonRef", void 0);
+        __decorate([
+            core.ViewChild('inputTemplateRef', {
+                read: core.TemplateRef,
+                static: true
+            })
+        ], SkyDatepickerComponent.prototype, "inputTemplateRef", void 0);
+        __decorate([
+            core.ViewChild('triggerButtonTemplateRef', {
+                read: core.TemplateRef,
+                static: true
+            })
+        ], SkyDatepickerComponent.prototype, "triggerButtonTemplateRef", void 0);
+        SkyDatepickerComponent = __decorate([
+            core.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: core.ChangeDetectionStrategy.OnPush,
+                styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}"]
+            }),
+            __param(4, core.Optional()),
+            __param(5, core.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: forms.NG_VALUE_ACCESSOR,
+        useExisting: core.forwardRef(function () { return SkyDatepickerInputDirective; }),
+        multi: true
+    };
+    var SKY_DATEPICKER_VALIDATOR = {
+        provide: forms.NG_VALIDATORS,
+        useExisting: core.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([
-            core.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 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 core.EventEmitter();
-            this.isOpen = false;
-            this.isVisible = false;
+            this.skyDatepickerNoValidate = false;
+            this.dateFormatter = new SkyDateFormatter();
+            this.isFirstChange = true;
             this.ngUnsubscribe = new rxjs.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(operators.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(operators.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 () {
-            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 rxjs.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(operators.takeUntil(this.calendarUnsubscribe))
-                .subscribe(function (change) {
-                _this.isVisible = (change.placement !== null);
-                _this.changeDetector.markForCheck();
-            });
-            affixer.affixTo(this.triggerButtonRef.nativeElement, {
-                autoFitContext: core$1.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(operators.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;
-            }
-        };
-        SkyDatepickerComponent.prototype.addKeydownListner = function () {
-            var _this = this;
-            this.overlayKeydownListner = rxjs.fromEvent(window.document, 'keydown')
-                .pipe(operators.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 */
-            if (this.calendarUnsubscribe) {
-                this.calendarUnsubscribe.next();
-                this.calendarUnsubscribe.complete();
-                this.calendarUnsubscribe = undefined;
-            }
-            (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        };
-        SkyDatepickerComponent.ctorParameters = function () { return [
-            { type: core$1.SkyAffixService },
-            { type: core.ChangeDetectorRef },
-            { type: core$1.SkyCoreAdapterService },
-            { type: core$1.SkyOverlayService },
-            { type: forms$1.SkyInputBoxHostService, decorators: [{ type: core.Optional }] },
-            { type: theme.SkyThemeService, decorators: [{ type: core.Optional }] }
-        ]; };
-        __decorate([
-            core.Input()
-        ], SkyDatepickerComponent.prototype, "pickerClass", void 0);
-        __decorate([
-            core.ViewChild(SkyDatepickerCalendarComponent)
-        ], SkyDatepickerComponent.prototype, "calendar", void 0);
-        __decorate([
-            core.ViewChild('calendarRef', {
-                read: core.ElementRef
-            })
-        ], SkyDatepickerComponent.prototype, "calendarRef", null);
-        __decorate([
-            core.ViewChild('calendarTemplateRef', {
-                read: core.TemplateRef
-            })
-        ], SkyDatepickerComponent.prototype, "calendarTemplateRef", void 0);
-        __decorate([
-            core.ViewChild('triggerButtonRef', {
-                read: core.ElementRef
-            })
-        ], SkyDatepickerComponent.prototype, "triggerButtonRef", void 0);
-        __decorate([
-            core.ViewChild('inputTemplateRef', {
-                read: core.TemplateRef,
-                static: true
-            })
-        ], SkyDatepickerComponent.prototype, "inputTemplateRef", void 0);
-        __decorate([
-            core.ViewChild('triggerButtonTemplateRef', {
-                read: core.TemplateRef,
-                static: true
-            })
-        ], SkyDatepickerComponent.prototype, "triggerButtonTemplateRef", void 0);
-        SkyDatepickerComponent = __decorate([
-            core.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: core.ChangeDetectionStrategy.OnPush,
-                styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}"]
-            }),
-            __param(4, core.Optional()),
-            __param(5, core.Optional())
-        ], SkyDatepickerComponent);
-        return SkyDatepickerComponent;
-    }());
-
-    var moment$3 = moment_;
-    // tslint:disable:no-forward-ref no-use-before-declare
-    var SKY_DATEPICKER_VALUE_ACCESSOR = {
-        provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: core.forwardRef(function () { return SkyDatepickerInputDirective; }),
-        multi: true
-    };
-    var SKY_DATEPICKER_VALIDATOR = {
-        provide: forms.NG_VALIDATORS,
-        useExisting: core.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 rxjs.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(operators.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
@@ -2707,267 +2506,811 @@
                     }
                     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(operators.takeUntil(this.ngUnsubscribe))
+                    .subscribe(function (value) {
+                    _this.renderer.setAttribute(element, 'aria-label', value);
+                });
+            }
+        };
+        SkyFuzzyDatepickerInputDirective.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.datepickerComponent.dateChange
+                .pipe(operators.distinctUntilChanged(), operators.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: core.ChangeDetectorRef },
+            { type: SkyDatepickerConfigService },
+            { type: core.ElementRef },
+            { type: SkyFuzzyDateService },
+            { type: i18n.SkyAppLocaleProvider },
+            { type: core.Renderer2 },
+            { type: i18n.SkyLibResourcesService },
+            { type: SkyDatepickerComponent, decorators: [{ type: core.Optional }] }
+        ]; };
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "dateFormat", null);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "disabled", null);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "futureDisabled", null);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "maxDate", null);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "minDate", null);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "skyDatepickerNoValidate", void 0);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "skyFuzzyDatepickerInput", null);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "startingDay", null);
+        __decorate([
+            core.Input()
+        ], SkyFuzzyDatepickerInputDirective.prototype, "yearRequired", null);
+        __decorate([
+            core.HostListener('change', ['$event'])
+        ], SkyFuzzyDatepickerInputDirective.prototype, "onInputChange", null);
+        __decorate([
+            core.HostListener('blur')
+        ], SkyFuzzyDatepickerInputDirective.prototype, "onInputBlur", null);
+        __decorate([
+            core.HostListener('keyup')
+        ], SkyFuzzyDatepickerInputDirective.prototype, "onInputKeyup", null);
+        SkyFuzzyDatepickerInputDirective = __decorate([
+            core.Directive({
+                selector: '[skyFuzzyDatepickerInput]',
+                providers: [
+                    SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+                    SKY_FUZZY_DATEPICKER_VALIDATOR
+                ]
+            }),
+            __param(7, core.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 rxjs.Subject();
+        }
+        SkyDatepickerService = __decorate([
+            core.Injectable()
+        ], SkyDatepickerService);
+        return SkyDatepickerService;
+    }());
+
+    /**
+     * @internal
+     */
+    var SkyDayPickerButtonComponent = /** @class */ (function () {
+        function SkyDayPickerButtonComponent(datepicker) {
+            this.datepicker = datepicker;
+        }
+        SkyDayPickerButtonComponent.ctorParameters = function () { return [
+            { type: SkyDatepickerCalendarInnerComponent }
+        ]; };
+        __decorate([
+            core.Input()
+        ], SkyDayPickerButtonComponent.prototype, "date", void 0);
+        SkyDayPickerButtonComponent = __decorate([
+            core.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 rxjs.Subject();
+            this.activeUid = '';
+            this.cancelPopover = false;
+            this.popoverOpen = false;
+            this.ngUnsubscribe = new rxjs.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(operators.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: popovers.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: popovers.SkyPopoverMessageType.Open });
+                    }
+                }, 500);
+            }
+        };
+        SkyDayPickerCellComponent.ctorParameters = function () { return [
+            { type: SkyDatepickerCalendarInnerComponent },
+            { type: SkyDatepickerService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], SkyDayPickerCellComponent.prototype, "activeDateHasChanged", void 0);
+        __decorate([
+            core.Input()
+        ], SkyDayPickerCellComponent.prototype, "date", void 0);
+        SkyDayPickerCellComponent = __decorate([
+            core.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: core.ChangeDetectionStrategy.OnPush
+            })
+        ], SkyDayPickerCellComponent);
+        return SkyDayPickerCellComponent;
+    }());
+
+    /**
+     * @internal
+     */
+    var SkyDayPickerComponent = /** @class */ (function () {
+        function SkyDayPickerComponent(datepicker) {
+            this.calendarDateRangeChange = new core.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 rxjs.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(operators.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(operators.distinctUntilChanged(), operators.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.format(this.value, this.dateFormat, this.locale);
-            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([
+            core.Input()
+        ], SkyDayPickerComponent.prototype, "customDates", null);
+        __decorate([
+            core.Output()
+        ], SkyDayPickerComponent.prototype, "calendarDateRangeChange", void 0);
+        __decorate([
+            core.Input()
+        ], SkyDayPickerComponent.prototype, "isWaiting", void 0);
+        SkyDayPickerComponent = __decorate([
+            core.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([
+            core.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: core.ChangeDetectorRef },
-            { type: SkyDatepickerConfigService },
-            { type: core.ElementRef },
-            { type: SkyFuzzyDateService },
-            { type: i18n.SkyAppLocaleProvider },
-            { type: core.Renderer2 },
-            { type: i18n.SkyLibResourcesService },
-            { type: SkyDatepickerComponent, decorators: [{ type: core.Optional }] }
+        SkyYearPickerComponent.ctorParameters = function () { return [
+            { type: SkyDatepickerCalendarInnerComponent }
         ]; };
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "dateFormat", null);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "disabled", null);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "futureDisabled", null);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "maxDate", null);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "minDate", null);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "skyDatepickerNoValidate", void 0);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "skyFuzzyDatepickerInput", null);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "startingDay", null);
-        __decorate([
-            core.Input()
-        ], SkyFuzzyDatepickerInputDirective.prototype, "yearRequired", null);
-        __decorate([
-            core.HostListener('change', ['$event'])
-        ], SkyFuzzyDatepickerInputDirective.prototype, "onInputChange", null);
-        __decorate([
-            core.HostListener('blur')
-        ], SkyFuzzyDatepickerInputDirective.prototype, "onInputBlur", null);
-        __decorate([
-            core.HostListener('keyup')
-        ], SkyFuzzyDatepickerInputDirective.prototype, "onInputKeyup", null);
-        SkyFuzzyDatepickerInputDirective = __decorate([
-            core.Directive({
-                selector: '[skyFuzzyDatepickerInput]',
-                providers: [
-                    SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-                    SKY_FUZZY_DATEPICKER_VALIDATOR
-                ]
-            }),
-            __param(7, core.Optional())
-        ], SkyFuzzyDatepickerInputDirective);
-        return SkyFuzzyDatepickerInputDirective;
+        SkyYearPickerComponent = __decorate([
+            core.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 () {
@@ -2983,7 +3326,9 @@
                     SkyYearPickerComponent,
                     SkyDatepickerComponent,
                     SkyDatepickerInputDirective,
-                    SkyFuzzyDatepickerInputDirective
+                    SkyFuzzyDatepickerInputDirective,
+                    SkyDayPickerCellComponent,
+                    SkyDayPickerButtonComponent
                 ],
                 imports: [
                     common.CommonModule,
@@ -2993,7 +3338,9 @@
                     SkyDateTimeResourcesModule,
                     core$1.SkyAffixModule,
                     core$1.SkyOverlayModule,
-                    theme.SkyThemeModule
+                    theme.SkyThemeModule,
+                    popovers.SkyPopoverModule,
+                    indicators.SkyWaitModule
                 ],
                 exports: [
                     SkyDatepickerCalendarComponent,
@@ -3003,14 +3350,17 @@
                     SkyYearPickerComponent,
                     SkyDatepickerComponent,
                     SkyDatepickerInputDirective,
-                    SkyFuzzyDatepickerInputDirective
+                    SkyFuzzyDatepickerInputDirective,
+                    SkyDayPickerCellComponent,
+                    SkyDayPickerButtonComponent
                 ],
                 providers: [
                     core$1.SkyAppWindowRef,
                     SkyDatepickerConfigService,
                     SkyFuzzyDateService,
                     core$1.SkyCoreAdapterService,
-                    theme.SkyThemeService
+                    theme.SkyThemeService,
+                    SkyDatepickerService
                 ]
             })
         ], SkyDatepickerModule);
@@ -4855,8 +5205,11 @@
     exports.ɵj = SkyDatepickerComponent;
     exports.ɵk = SkyDatepickerInputDirective;
     exports.ɵl = SkyFuzzyDatepickerInputDirective;
-    exports.ɵm = SkyTimepickerInputDirective;
-    exports.ɵn = SkyTimepickerComponent;
+    exports.ɵm = SkyDayPickerCellComponent;
+    exports.ɵn = SkyDatepickerService;
+    exports.ɵo = SkyDayPickerButtonComponent;
+    exports.ɵp = SkyTimepickerInputDirective;
+    exports.ɵq = SkyTimepickerComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });