@skyux/datetime 5.5.0 → 5.6.2

package/fesm2015/skyux-datetime.js

@@ -15,15 +15,13 @@ import * as i1 from '@skyux/core';
 import { SkyAffixAutoFitContext, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
 import * as i2 from '@skyux/indicators';
 import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
-import * as i3$2 from '@skyux/theme';
-import { SkyThemeModule } from '@skyux/theme';
 import * as i3$1 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
+import * as i3$2 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
 
 // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
 class SkyDateFormatUtility {
-    /* istanbul ignore next */
-    constructor() { }
     static format(locale, value, pattern) {
         let date;
         if (isBlank(value) || value !== value) {
@@ -293,10 +291,10 @@ class SkyFuzzyDateService {
             return '';
         }
         const separator = this.getDateSeparator(format);
-        let dateParts = [];
-        let formatTokens = format.split(separator);
+        const dateParts = [];
+        const formatTokens = format.split(separator);
         locale = locale || this.currentLocale;
-        let fuzzyDateMoment = this.getMomentFromFuzzyDate(fuzzyDate).locale(locale);
+        const fuzzyDateMoment = this.getMomentFromFuzzyDate(fuzzyDate).locale(locale);
         for (let index = 0; index < formatTokens.length; index++) {
             const token = formatTokens[index];
             /* istanbul ignore else */
@@ -348,7 +346,7 @@ class SkyFuzzyDateService {
         const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
         let dateString = '';
         // Get the components of the date in the order expected of the local format.
-        let dateComponents = [
+        const dateComponents = [
             { value: fuzzyDate.year || 0, index: dateFormatIndexes.yearIndex },
             { value: fuzzyDate.month || 0, index: dateFormatIndexes.monthIndex },
             { value: fuzzyDate.day || 0, index: dateFormatIndexes.dayIndex },
@@ -368,7 +366,7 @@ class SkyFuzzyDateService {
         if (!selectedDate || !dateFormat) {
             return;
         }
-        let fuzzyDate = {};
+        const fuzzyDate = {};
         const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
         if (dateFormatIndexes.yearIndex > -1) {
             fuzzyDate.year = selectedDate.getFullYear();
@@ -451,7 +449,7 @@ class SkyFuzzyDateService {
             // Check if day is valid.
             if (day) {
                 day = parseInt(day, 10);
-                let fuzzyMoment = this.getMomentFromFuzzyDate({
+                const fuzzyMoment = this.getMomentFromFuzzyDate({
                     month: month,
                     day: day,
                     year: year,
@@ -502,7 +500,7 @@ class SkyFuzzyDateService {
         };
     }
     getCurrentFuzzyDate() {
-        let currentDate = moment();
+        const currentDate = moment();
         return {
             day: currentDate.date(),
             month: currentDate.month() + 1,
@@ -523,7 +521,7 @@ class SkyFuzzyDateService {
      */
     getDateSeparator(dateFormat) {
         let returnValue;
-        let separators = ['/', '.', '-', ' '];
+        const separators = ['/', '.', '-', ' '];
         separators.forEach((separator) => {
             if (!returnValue && dateFormat.indexOf(separator) > 0) {
                 returnValue = separator;
@@ -591,7 +589,7 @@ class SkyFuzzyDateService {
     // Returns the index of each of the date components in the provided string (month, day, year).
     getDateValueIndexes(date, dateFormat) {
         const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
-        let dateComponentIndexes = [];
+        const dateComponentIndexes = [];
         if (dateFormatIndexes.yearIndex > -1) {
             dateComponentIndexes.push(dateFormatIndexes.yearIndex);
         }
@@ -900,37 +898,6 @@ var SkyDateRangeCalculatorType;
     SkyDateRangeCalculatorType[SkyDateRangeCalculatorType["Relative"] = 3] = "Relative";
 })(SkyDateRangeCalculatorType || (SkyDateRangeCalculatorType = {}));
 
-/**
- * @internal
- */
-class SkyDatepickerAdapterService {
-    constructor(renderer) {
-        this.renderer = renderer;
-    }
-    init(elRef) {
-        this.el = elRef.nativeElement;
-    }
-    elementIsFocused() {
-        const focusedEl = document.activeElement;
-        return this.el.contains(focusedEl);
-    }
-    elementIsVisible() {
-        const styles = this.el && getComputedStyle(this.el);
-        return styles && styles.visibility === 'visible';
-    }
-    getPlaceholder(elementRef) {
-        return elementRef.nativeElement.getAttribute('placeholder');
-    }
-    setPlaceholder(elementRef, value) {
-        this.renderer.setAttribute(elementRef.nativeElement, 'placeholder', value);
-    }
-}
-SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
-
 class SkyDateFormatter {
     /**
      * Sets moment's global locale.
@@ -1114,7 +1081,7 @@ class SkyDatepickerCalendarInnerComponent {
         return false;
     }
     onKeydown(event) {
-        let key = this.keys[event.which];
+        const key = this.keys[event.which];
         if (!key || event.shiftKey || event.altKey) {
             return;
         }
@@ -1136,7 +1103,7 @@ class SkyDatepickerCalendarInnerComponent {
     }
     createDateObject(date, format, isSecondary, id) {
         const customDateMatch = this.getCustomDate(date);
-        let dateObject = {
+        const dateObject = {
             date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
             label: this.dateFilter(date, format),
             selected: this.compare(date, this.selectedDate) === 0,
@@ -1150,7 +1117,7 @@ class SkyDatepickerCalendarInnerComponent {
         return dateObject;
     }
     createCalendarRows(dates, size) {
-        let rows = [];
+        const rows = [];
         while (dates.length > 0) {
             rows.push(dates.splice(0, size));
         }
@@ -1160,7 +1127,7 @@ class SkyDatepickerCalendarInnerComponent {
       This is ensures that no strangeness happens when converting a date to local time.
     */
     fixTimeZone(date) {
-        let newDate = new Date(date);
+        const newDate = new Date(date);
         newDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
         return newDate;
     }
@@ -1209,8 +1176,8 @@ class SkyDatepickerCalendarInnerComponent {
         /* istanbul ignore else */
         /* sanity check */
         if (expectedStep) {
-            let year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
-            let month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
+            const year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
+            const month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
             this.activeDate = new Date(year, month, 1);
             this.refreshView();
         }
@@ -1278,6 +1245,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * @internal
+ */
+class SkyDatepickerAdapterService {
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    init(elRef) {
+        this.el = elRef.nativeElement;
+    }
+    elementIsFocused() {
+        const focusedEl = document.activeElement;
+        return this.el.contains(focusedEl);
+    }
+    elementIsVisible() {
+        const styles = this.el && getComputedStyle(this.el);
+        return styles && styles.visibility === 'visible';
+    }
+    getPlaceholder(elementRef) {
+        return elementRef.nativeElement.getAttribute('placeholder');
+    }
+    setPlaceholder(elementRef, value) {
+        this.renderer.setAttribute(elementRef.nativeElement, 'placeholder', value);
+    }
+}
+SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
 class SkyDatepickerConfigService {
     constructor() {
         /**
@@ -1494,7 +1492,7 @@ class SkyDayPickerComponent {
         this.ngUnsubscribe.complete();
     }
     getDates(startDate, n) {
-        let dates = new Array(n);
+        const dates = new Array(n);
         let current = new Date(startDate.getTime());
         let i = 0;
         let date;
@@ -1507,17 +1505,17 @@ class SkyDayPickerComponent {
         return dates;
     }
     compareDays(date1, date2) {
-        let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
-        let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
         return d1.getTime() - d2.getTime();
     }
     refreshDayView() {
-        let year = this.datepicker.activeDate.getFullYear();
-        let month = this.datepicker.activeDate.getMonth();
-        let firstDayOfMonth = new Date(year, month, 1);
-        let difference = this.datepicker.startingDay - firstDayOfMonth.getDay();
-        let numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
-        let firstDate = new Date(firstDayOfMonth.getTime());
+        const year = this.datepicker.activeDate.getFullYear();
+        const month = this.datepicker.activeDate.getMonth();
+        const firstDayOfMonth = new Date(year, month, 1);
+        const difference = this.datepicker.startingDay - firstDayOfMonth.getDay();
+        const numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
+        const firstDate = new Date(firstDayOfMonth.getTime());
         if (this.datepicker.activeDate.getDate() !== this.initialDate) {
             this.activeDateHasChanged = true;
         }
@@ -1527,10 +1525,10 @@ class SkyDayPickerComponent {
             firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
         }
         // 42 is the number of days on a six-week calendar
-        let days = this.getDates(firstDate, 42);
-        let pickerDates = [];
+        const days = this.getDates(firstDate, 42);
+        const pickerDates = [];
         for (let i = 0; i < 42; i++) {
-            let _dateObject = this.datepicker.createDateObject(days[i], this.datepicker.formatDay, days[i].getMonth() !== month, this.datepicker.datepickerId + '-' + i);
+            const _dateObject = this.datepicker.createDateObject(days[i], this.datepicker.formatDay, days[i].getMonth() !== month, this.datepicker.datepickerId + '-' + i);
             pickerDates[i] = _dateObject;
         }
         this.labels = [];
@@ -1567,7 +1565,7 @@ class SkyDayPickerComponent {
             date = date + 7;
         }
         else if (key === 'pageup' || key === 'pagedown') {
-            let month = this.datepicker.activeDate.getMonth() + (key === 'pageup' ? -1 : 1);
+            const 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);
         }
@@ -1683,13 +1681,13 @@ class SkyMonthPickerComponent {
         }, 'month');
     }
     compareMonth(date1, date2) {
-        let d1 = new Date(date1.getFullYear(), date1.getMonth());
-        let d2 = new Date(date2.getFullYear(), date2.getMonth());
+        const d1 = new Date(date1.getFullYear(), date1.getMonth());
+        const d2 = new Date(date2.getFullYear(), date2.getMonth());
         return d1.getTime() - d2.getTime();
     }
     refreshMonthView() {
-        let months = new Array(12);
-        let year = this.datepicker.activeDate.getFullYear();
+        const months = new Array(12);
+        const year = this.datepicker.activeDate.getFullYear();
         let date;
         for (let i = 0; i < 12; i++) {
             date = new Date(year, i, 1);
@@ -1716,7 +1714,7 @@ class SkyMonthPickerComponent {
             date = date + this.datepicker.monthColLimit;
         }
         else if (key === 'pageup' || key === 'pagedown') {
-            let year = this.datepicker.activeDate.getFullYear() + (key === 'pageup' ? -1 : 1);
+            const year = this.datepicker.activeDate.getFullYear() + (key === 'pageup' ? -1 : 1);
             this.datepicker.activeDate.setFullYear(year);
         }
         else if (key === 'home') {
@@ -1767,9 +1765,9 @@ class SkyYearPickerComponent {
         return date1.getFullYear() - date2.getFullYear();
     }
     refreshYearView() {
-        let years = new Array(this.datepicker.yearRange);
+        const years = new Array(this.datepicker.yearRange);
         let date;
-        let start = this.getStartingYear(this.datepicker.activeDate.getFullYear());
+        const start = this.getStartingYear(this.datepicker.activeDate.getFullYear());
         for (let i = 0; i < this.datepicker.yearRange; i++) {
             date = new Date(this.datepicker.activeDate);
             date.setFullYear(start + i, 0, 1);
@@ -2239,61 +2237,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 // tslint:disable:no-forward-ref no-use-before-declare
-const SKY_DATEPICKER_VALUE_ACCESSOR = {
+const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SkyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
     multi: true,
 };
-const SKY_DATEPICKER_VALIDATOR = {
+const SKY_FUZZY_DATEPICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => SkyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
     multi: true,
 };
 // tslint:enable
-class SkyDatepickerInputDirective {
-    constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
-        this.adapter = adapter;
+class SkyFuzzyDatepickerInputDirective {
+    constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
         this.changeDetector = changeDetector;
         this.configService = configService;
         this.elementRef = elementRef;
+        this.fuzzyDateService = fuzzyDateService;
         this.localeProvider = localeProvider;
         this.renderer = renderer;
         this.resourcesService = resourcesService;
         this.datepickerComponent = datepickerComponent;
         /**
-         * Indicates whether to disable date validation on the datepicker input.
+         * Indicates whether to disable date validation on the fuzzy datepicker input.
          * @default false
          */
         this.skyDatepickerNoValidate = false;
         this.dateFormatter = new SkyDateFormatter();
-        this.isFirstChange = true;
         this.ngUnsubscribe = new Subject();
+        this._futureDisabled = false;
+        this._disabled = false;
+        this._yearRequired = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_) => { };
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onValidatorChange = () => { };
-        this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
-        this.updatePlaceholder();
         this.localeProvider
             .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
-            SkyDateFormatter.setLocale(localeInfo.locale);
+            this.locale = localeInfo.locale;
+            SkyDateFormatter.setLocale(this.locale);
             this.preferredShortDateFormat =
                 SkyDateFormatter.getPreferredShortDateFormat();
-            this.applyDateFormat();
         });
     }
     /**
      * Specifies the date format for the input. Place this attribute on the `input` element
-     * to override the default in the `SkyDatepickerConfigService`.
+     * to override the default in `SkyDatepickerConfigService`.
      * @default "MM/DD/YYYY"
      */
     set dateFormat(value) {
-        /* istanbul ignore else */
-        if (value !== this._dateFormat) {
-            this._dateFormat = value;
-            this.applyDateFormat();
+        this._dateFormat = value;
+        if (this.value) {
+            const formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
+            this.setInputElementValue(formattedDate);
+            this.changeDetector.markForCheck();
         }
     }
     get dateFormat() {
@@ -2311,53 +2312,58 @@ class SkyDatepickerInputDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', value);
     }
     get disabled() {
-        return this._disabled || false;
+        return this._disabled;
     }
     /**
-     * @internal
-     * Indicates if the input element or any of its children have focus.
+     * Indicates whether to prevent users from specifying dates that are in the future.
+     * Place this attribute on the `input` element.
+     * @default false
      */
-    get inputIsFocused() {
-        return this.adapter.elementIsFocused();
+    set futureDisabled(value) {
+        this._futureDisabled = value;
+        this.onValidatorChange();
+    }
+    get futureDisabled() {
+        return this._futureDisabled;
     }
     /**
-     * Specifies the latest date that is available in the calendar. Place this attribute on
-     * the `input` element to override the default in `SkyDatepickerConfigService`.
+     * Specifies the latest fuzzy date allowed. Place this attribute on the `input` element
+     * to prevent fuzzy dates after a specified date. This property accepts
+     * a `SkyFuzzyDate` value that includes numeric month, day, and year values.
+     * For example: `{ month: 1, day: 1, year: 2027 }`.
      */
     set maxDate(value) {
         this._maxDate = value;
-        this.datepickerComponent.maxDate = this.maxDate;
+        this.datepickerComponent.maxDate = this.getMaxDate();
         this.onValidatorChange();
     }
     get maxDate() {
-        return this._maxDate || this.configService.maxDate;
+        return this._maxDate;
     }
     /**
-     * Specifies the earliest date that is available in the calendar. Place this attribute on
-     * the `input` element to override the default in `SkyDatepickerConfigService`.
+     * Specifies the earliest fuzzy date allowed. Place this attribute on the `input` element
+     * to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
+     * that includes numeric month, day, and year values.
+     * For example: `{ month: 1, day: 1, year: 2007 }`.
      */
     set minDate(value) {
         this._minDate = value;
-        this.datepickerComponent.minDate = this.minDate;
+        this.datepickerComponent.minDate = this.getMinDate();
         this.onValidatorChange();
     }
     get minDate() {
-        return this._minDate || this.configService.minDate;
+        return this._minDate;
     }
     /**
-     * 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
+     * Creates the fuzzy datepicker input and calendar to let users specify dates that are
+     * not complete. For example, if users know the year but not the month or day, they can
+     * enter just the year. 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 skyDatepickerInput(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>');
-        }
+    set skyFuzzyDatepickerInput(value) {
+        // TODO: Remove this property in a future version of SKY UX.
     }
     /**
      * Specifies the starting day of the week in the calendar, where `0` sets the starting day
@@ -2374,54 +2380,36 @@ class SkyDatepickerInputDirective {
         return this._startingDay || this.configService.startingDay;
     }
     /**
-     * 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).
+     * Indicates whether to require the year in fuzzy dates.
      * @default false
      */
-    set strict(value) {
-        this._strict = value;
+    set yearRequired(value) {
+        this._yearRequired = value;
+        this.onValidatorChange();
     }
-    get strict() {
-        return this._strict || false;
+    get yearRequired() {
+        return this._yearRequired;
     }
     get value() {
         return this._value;
     }
     set value(value) {
-        const dateValue = this.getDateValue(value);
-        const areDatesEqual = this._value instanceof Date &&
-            dateValue &&
-            dateValue.getTime() === this._value.getTime();
-        const 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) {
-            const formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
-            this.setInputElementValue(formattedDate);
-        }
-        else {
-            this.setInputElementValue(value || '');
-        }
+        this.updateValue(value);
     }
     ngOnInit() {
+        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 `skyDatepickerInput` directive within a ' +
+            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
                 '`<sky-datepicker>` component!');
         }
         const element = this.elementRef.nativeElement;
         this.renderer.addClass(element, 'sky-form-control');
         const hasAriaLabel = element.getAttribute('aria-label');
+        /* istanbul ignore else */
         if (!hasAriaLabel) {
             this.resourcesService
                 .getString('skyux_date_field_default_label')
@@ -2433,10 +2421,8 @@ class SkyDatepickerInputDirective {
     }
     ngAfterContentInit() {
         this.datepickerComponent.dateChange
-            .pipe(distinctUntilChanged())
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            this.isFirstChange = false;
             this.value = value;
             this.onTouched();
         });
@@ -2456,39 +2442,26 @@ class SkyDatepickerInputDirective {
                 this.changeDetector.markForCheck();
             });
         }
-        this.adapter.init(this.elementRef);
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
     onInputChange(event) {
-        const value = event.target.value;
-        if (this.skyDatepickerNoValidate) {
-            this.onValueChange(value);
-            return;
-        }
-        // Don't try to parse the string value into a Date value if it is malformed.
-        if (this.isDateStringValid(value)) {
-            this.onValueChange(value);
-            return;
-        }
-        this._value = value;
-        this.onChange(value);
-        this.control.setErrors({
-            skyDate: {
-                invalid: true,
-            },
-        });
+        this.onValueChange(event.target.value);
     }
     onInputBlur() {
         this.onTouched();
+        const formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
+        if (this.control.valid) {
+            this.setInputElementValue(formattedDate);
+        }
     }
     onInputKeyup() {
         this.control.markAsDirty();
     }
     writeValue(value) {
-        this.value = value;
+        this.updateValue(value, false);
     }
     validate(control) {
         if (!this.control) {
@@ -2497,38 +2470,71 @@ class SkyDatepickerInputDirective {
         if (this.skyDatepickerNoValidate) {
             return;
         }
-        const value = control.value;
-        if (!value) {
+        if (!this.control.value) {
             return;
         }
-        const dateValue = this.getDateValue(value);
-        const isDateValid = dateValue && this.dateFormatter.dateIsValid(dateValue);
-        if (!isDateValid || !this.isDateStringValid(value)) {
-            // 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 {
-                skyDate: {
+        const value = control.value;
+        let fuzzyDate;
+        let validationError;
+        if (typeof value === 'string') {
+            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+        }
+        else {
+            fuzzyDate = value;
+        }
+        if (!fuzzyDate) {
+            validationError = {
+                skyFuzzyDate: {
                     invalid: value,
                 },
             };
         }
-        const minDate = this.minDate;
-        if (minDate && this.dateFormatter.dateIsValid(minDate) && value < minDate) {
-            return {
-                skyDate: {
-                    minDate,
+        if (!validationError && !fuzzyDate.year && this.yearRequired) {
+            validationError = {
+                skyFuzzyDate: {
+                    yearRequired: value,
                 },
             };
         }
-        const maxDate = this.maxDate;
-        if (maxDate && this.dateFormatter.dateIsValid(maxDate) && value > maxDate) {
-            return {
-                skyDate: {
-                    maxDate,
-                },
-            };
+        if (!validationError && fuzzyDate.year) {
+            let fuzzyDateRange;
+            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;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2550,102 +2556,127 @@ class SkyDatepickerInputDirective {
     detectInputValueChange() {
         this.onValueChange(this.elementRef.nativeElement.value);
     }
-    applyDateFormat() {
-        this.updatePlaceholder();
-        if (this.value) {
-            const formattedDate = this.dateFormatter.format(this.value, this.dateFormat);
-            this.setInputElementValue(formattedDate);
-            this.changeDetector.markForCheck();
-        }
-    }
     onValueChange(newValue) {
-        this.isFirstChange = false;
         this.value = newValue;
     }
     setInputElementValue(value) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
     }
-    getDateValue(value) {
-        let dateValue;
-        if (value instanceof Date) {
-            dateValue = value;
+    getMaxDate() {
+        if (this.maxDate) {
+            const maxDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
+            if (maxDate.isValid()) {
+                return maxDate.toDate();
+            }
         }
-        else if (typeof value === 'string') {
-            const date = this.dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
-            if (this.dateFormatter.dateIsValid(date)) {
-                dateValue = date;
+        else if (this.futureDisabled) {
+            return new Date();
+        }
+        return this.configService.maxDate;
+    }
+    getMinDate() {
+        if (this.minDate) {
+            const minDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
+            if (minDate.isValid()) {
+                return minDate.toDate();
             }
         }
-        return dateValue;
+        return this.configService.minDate;
+    }
+    /* istanbul ignore next */
+    fuzzyDatesEqual(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));
     }
     /**
-     * Validates the input value to ensure it is formatted correctly.
+     * Update the value of the form control and input element
+     * @param emitEvent Denotes if we emit an event to the consumer's form control. We do not want to do this if the value is being updated via a `setValue` call or a `patchValue` call as this is already handled by Angular.
+     * In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
      */
-    isDateStringValid(value) {
-        if (!value || typeof value !== 'string') {
-            return true;
+    updateValue(value, emitEvent = true) {
+        var _a;
+        if (this._value === value) {
+            return;
         }
-        // Does the value only include digits, dashes, or slashes?
-        const regexp = /^[\d\/\-]+$/;
-        const isValid = regexp.test(value);
-        if (isValid) {
-            return true;
+        let fuzzyDate;
+        let fuzzyMoment;
+        let dateValue;
+        let formattedDate;
+        if (value instanceof Date) {
+            dateValue = value;
+            formattedDate = this.dateFormatter.format(value, this.dateFormat);
+            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
         }
-        // If not, does it conform to the standard ISO format?
-        const isValidIso = moment(value, moment.ISO_8601).isValid();
-        return isValidIso;
-    }
-    notifyUpdatedValue() {
-        this.onChange(this._value);
-        // Do not mark the field as "dirty"
-        // if the field has been initialized with a value.
-        if (this.isFirstChange && this.control) {
-            this.control.markAsPristine();
+        else if (typeof value === 'string') {
+            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
+            if (!formattedDate) {
+                formattedDate = value;
+            }
+            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
+            if (fuzzyMoment) {
+                dateValue = fuzzyMoment.toDate();
+            }
         }
-        if (this.isFirstChange && this._value) {
-            this.isFirstChange = false;
+        else {
+            fuzzyDate = value;
+            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
+            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
+            if (fuzzyMoment) {
+                dateValue = fuzzyMoment.toDate();
+            }
         }
-        this.datepickerComponent.selectedDate = this._value;
-    }
-    updatePlaceholder() {
-        if (!this.initialPlaceholder) {
-            this.adapter.setPlaceholder(this.elementRef, this.dateFormat);
+        const areFuzzyDatesEqual = this.fuzzyDatesEqual(this._value, fuzzyDate);
+        const isNewValue = fuzzyDate !== this._value || !areFuzzyDatesEqual;
+        this._value = fuzzyDate || value;
+        if (isNewValue) {
+            if (emitEvent) {
+                this.onChange(this._value);
+            }
+            else {
+                (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(this._value, { emitEvent: false });
+            }
+            this.datepickerComponent.selectedDate = dateValue;
         }
+        this.setInputElementValue(formattedDate || '');
     }
 }
-SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
-        SKY_DATEPICKER_VALUE_ACCESSOR,
-        SKY_DATEPICKER_VALIDATOR,
-        SkyDatepickerAdapterService,
+SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
+        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+        SKY_FUZZY_DATEPICKER_VALIDATOR,
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[skyDatepickerInput]',
+                    selector: '[skyFuzzyDatepickerInput]',
                     providers: [
-                        SKY_DATEPICKER_VALUE_ACCESSOR,
-                        SKY_DATEPICKER_VALIDATOR,
-                        SkyDatepickerAdapterService,
+                        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+                        SKY_FUZZY_DATEPICKER_VALIDATOR,
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { dateFormat: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], futureDisabled: [{
+                type: Input
             }], maxDate: [{
                 type: Input
             }], minDate: [{
                 type: Input
-            }], skyDatepickerInput: [{
-                type: Input
             }], skyDatepickerNoValidate: [{
                 type: Input
+            }], skyFuzzyDatepickerInput: [{
+                type: Input
             }], startingDay: [{
                 type: Input
-            }], strict: [{
+            }], yearRequired: [{
                 type: Input
             }], onInputChange: [{
                 type: HostListener,
@@ -2659,63 +2690,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 // tslint:disable:no-forward-ref no-use-before-declare
-const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
+const SKY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyDatepickerInputDirective),
     multi: true,
 };
-const SKY_FUZZY_DATEPICKER_VALIDATOR = {
+const SKY_DATEPICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyDatepickerInputDirective),
     multi: true,
 };
 // tslint:enable
-class SkyFuzzyDatepickerInputDirective {
-    constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
+class SkyDatepickerInputDirective {
+    constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
+        this.adapter = adapter;
         this.changeDetector = changeDetector;
         this.configService = configService;
         this.elementRef = elementRef;
-        this.fuzzyDateService = fuzzyDateService;
         this.localeProvider = localeProvider;
         this.renderer = renderer;
         this.resourcesService = resourcesService;
         this.datepickerComponent = datepickerComponent;
         /**
-         * Indicates whether to disable date validation on the fuzzy datepicker input.
+         * Indicates whether to disable date validation on the datepicker input.
          * @default false
          */
         this.skyDatepickerNoValidate = false;
         this.dateFormatter = new SkyDateFormatter();
-        this.isFirstChange = true;
         this.ngUnsubscribe = new Subject();
-        this._futureDisabled = false;
-        this._disabled = false;
-        this._yearRequired = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_) => { };
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onValidatorChange = () => { };
+        this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
+        this.updatePlaceholder();
         this.localeProvider
             .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
-            this.locale = localeInfo.locale;
-            SkyDateFormatter.setLocale(this.locale);
+            SkyDateFormatter.setLocale(localeInfo.locale);
             this.preferredShortDateFormat =
                 SkyDateFormatter.getPreferredShortDateFormat();
+            this.applyDateFormat();
         });
     }
     /**
      * Specifies the date format for the input. Place this attribute on the `input` element
-     * to override the default in `SkyDatepickerConfigService`.
+     * to override the default in the `SkyDatepickerConfigService`.
      * @default "MM/DD/YYYY"
      */
     set dateFormat(value) {
-        this._dateFormat = value;
-        if (this.value) {
-            const formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
-            this.setInputElementValue(formattedDate);
-            this.changeDetector.markForCheck();
+        /* istanbul ignore else */
+        if (value !== this._dateFormat) {
+            this._dateFormat = value;
+            this.applyDateFormat();
         }
     }
     get dateFormat() {
@@ -2733,57 +2763,54 @@ class SkyFuzzyDatepickerInputDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', value);
     }
     get disabled() {
-        return this._disabled;
+        return this._disabled || false;
     }
     /**
-     * Indicates whether to prevent users from specifying dates that are in the future.
-     * Place this attribute on the `input` element.
-     * @default false
+     * @internal
+     * Indicates if the input element or any of its children have focus.
      */
-    set futureDisabled(value) {
-        this._futureDisabled = value;
-        this.onValidatorChange();
-    }
-    get futureDisabled() {
-        return this._futureDisabled;
+    get inputIsFocused() {
+        return this.adapter.elementIsFocused();
     }
     /**
-     * Specifies the latest fuzzy date allowed. Place this attribute on the `input` element
-     * to prevent fuzzy dates after a specified date. This property accepts
-     * a `SkyFuzzyDate` value that includes numeric month, day, and year values.
-     * For example: `{ month: 1, day: 1, year: 2027 }`.
+     * Specifies the latest date that is available in the calendar. Place this attribute on
+     * the `input` element to override the default in `SkyDatepickerConfigService`.
      */
     set maxDate(value) {
         this._maxDate = value;
-        this.datepickerComponent.maxDate = this.getMaxDate();
+        this.datepickerComponent.maxDate = this.maxDate;
         this.onValidatorChange();
     }
     get maxDate() {
-        return this._maxDate;
+        return this._maxDate || this.configService.maxDate;
     }
     /**
-     * Specifies the earliest fuzzy date allowed. Place this attribute on the `input` element
-     * to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
-     * that includes numeric month, day, and year values.
-     * For example: `{ month: 1, day: 1, year: 2007 }`.
+     * Specifies the earliest date that is available in the calendar. Place this attribute on
+     * the `input` element to override the default in `SkyDatepickerConfigService`.
      */
     set minDate(value) {
         this._minDate = value;
-        this.datepickerComponent.minDate = this.getMinDate();
+        this.datepickerComponent.minDate = this.minDate;
         this.onValidatorChange();
     }
     get minDate() {
-        return this._minDate;
+        return this._minDate || this.configService.minDate;
     }
     /**
-     * Creates the fuzzy datepicker input and calendar to let users specify dates that are
-     * not complete. For example, if users know the year but not the month or day, they can
-     * enter just the year. Place this directive on an `input` element, and wrap the `input`
-     * in a `sky-datepicker` component. The value that users select is driven
+     * 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 skyFuzzyDatepickerInput(value) { }
+    set skyDatepickerInput(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>');
+        }
+    }
     /**
      * 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
@@ -2799,79 +2826,33 @@ class SkyFuzzyDatepickerInputDirective {
         return this._startingDay || this.configService.startingDay;
     }
     /**
-     * Indicates whether to require the year in fuzzy dates.
+     * 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 yearRequired(value) {
-        this._yearRequired = value;
-        this.onValidatorChange();
+    set strict(value) {
+        this._strict = value;
     }
-    get yearRequired() {
-        return this._yearRequired;
+    get strict() {
+        return this._strict || false;
     }
     get value() {
         return this._value;
     }
     set value(value) {
-        let fuzzyDate;
-        let fuzzyMoment;
-        let dateValue;
-        let formattedDate;
-        if (value instanceof Date) {
-            dateValue = value;
-            formattedDate = this.dateFormatter.format(value, this.dateFormat);
-            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
-        }
-        else if (typeof value === 'string') {
-            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
-            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
-            if (!formattedDate) {
-                formattedDate = value;
-            }
-            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
-            if (fuzzyMoment) {
-                dateValue = fuzzyMoment.toDate();
-            }
-        }
-        else {
-            fuzzyDate = value;
-            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
-            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
-            if (fuzzyMoment) {
-                dateValue = fuzzyMoment.toDate();
-            }
-        }
-        const areFuzzyDatesEqual = this.fuzzyDatesEqual(this._value, fuzzyDate);
-        const isNewValue = fuzzyDate !== this._value || !areFuzzyDatesEqual;
-        this._value = fuzzyDate || value;
-        if (isNewValue) {
-            this.onChange(this._value);
-            // Do not mark the field as "dirty"
-            // if the field has been initialized with a value.
-            if (this.isFirstChange && this.control) {
-                this.control.markAsPristine();
-            }
-            if (this.isFirstChange && this._value) {
-                this.isFirstChange = false;
-            }
-            this.datepickerComponent.selectedDate = dateValue;
-        }
-        this.setInputElementValue(formattedDate || '');
+        this.updateValue(value);
     }
-    ngOnInit() {
-        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.');
-            }
-        }
+    ngOnInit() {
         if (!this.datepickerComponent) {
-            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
+            throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
                 '`<sky-datepicker>` component!');
         }
         const element = this.elementRef.nativeElement;
         this.renderer.addClass(element, 'sky-form-control');
         const hasAriaLabel = element.getAttribute('aria-label');
-        /* istanbul ignore else */
         if (!hasAriaLabel) {
             this.resourcesService
                 .getString('skyux_date_field_default_label')
@@ -2883,9 +2864,9 @@ class SkyFuzzyDatepickerInputDirective {
     }
     ngAfterContentInit() {
         this.datepickerComponent.dateChange
-            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+            .pipe(distinctUntilChanged())
+            .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            this.isFirstChange = false;
             this.value = value;
             this.onTouched();
         });
@@ -2905,26 +2886,39 @@ class SkyFuzzyDatepickerInputDirective {
                 this.changeDetector.markForCheck();
             });
         }
+        this.adapter.init(this.elementRef);
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
     onInputChange(event) {
-        this.onValueChange(event.target.value);
+        const value = event.target.value;
+        if (this.skyDatepickerNoValidate) {
+            this.onValueChange(value);
+            return;
+        }
+        // Don't try to parse the string value into a Date value if it is malformed.
+        if (this.isDateStringValid(value)) {
+            this.onValueChange(value);
+            return;
+        }
+        this._value = value;
+        this.onChange(value);
+        this.control.setErrors({
+            skyDate: {
+                invalid: true,
+            },
+        });
     }
     onInputBlur() {
         this.onTouched();
-        let formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
-        if (this.control.valid) {
-            this.setInputElementValue(formattedDate);
-        }
     }
     onInputKeyup() {
         this.control.markAsDirty();
     }
     writeValue(value) {
-        this.value = value;
+        this.updateValue(value, false);
     }
     validate(control) {
         if (!this.control) {
@@ -2933,71 +2927,38 @@ class SkyFuzzyDatepickerInputDirective {
         if (this.skyDatepickerNoValidate) {
             return;
         }
-        if (!this.control.value) {
-            return;
-        }
         const value = control.value;
-        let fuzzyDate;
-        let validationError;
-        if (typeof value === 'string') {
-            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
-        }
-        else {
-            fuzzyDate = value;
+        if (!value) {
+            return;
         }
-        if (!fuzzyDate) {
-            validationError = {
-                skyFuzzyDate: {
+        const dateValue = this.getDateValue(value);
+        const isDateValid = dateValue && this.dateFormatter.dateIsValid(dateValue);
+        if (!isDateValid || !this.isDateStringValid(value)) {
+            // 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 {
+                skyDate: {
                     invalid: value,
                 },
             };
         }
-        if (!validationError && !fuzzyDate.year && this.yearRequired) {
-            validationError = {
-                skyFuzzyDate: {
-                    yearRequired: value,
+        const minDate = this.minDate;
+        if (minDate && this.dateFormatter.dateIsValid(minDate) && value < minDate) {
+            return {
+                skyDate: {
+                    minDate,
                 },
             };
         }
-        if (!validationError && fuzzyDate.year) {
-            let fuzzyDateRange;
-            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();
+        const maxDate = this.maxDate;
+        if (maxDate && this.dateFormatter.dateIsValid(maxDate) && value > maxDate) {
+            return {
+                skyDate: {
+                    maxDate,
+                },
+            };
         }
-        return validationError;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3019,76 +2980,134 @@ class SkyFuzzyDatepickerInputDirective {
     detectInputValueChange() {
         this.onValueChange(this.elementRef.nativeElement.value);
     }
+    applyDateFormat() {
+        this.updatePlaceholder();
+        if (this.value) {
+            const formattedDate = this.dateFormatter.format(this.value, this.dateFormat);
+            this.setInputElementValue(formattedDate);
+            this.changeDetector.markForCheck();
+        }
+    }
     onValueChange(newValue) {
-        this.isFirstChange = false;
         this.value = newValue;
     }
     setInputElementValue(value) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
     }
-    getMaxDate() {
-        if (this.maxDate) {
-            const maxDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
-            if (maxDate.isValid()) {
-                return maxDate.toDate();
+    getDateValue(value) {
+        let dateValue;
+        if (value instanceof Date) {
+            dateValue = value;
+        }
+        else if (typeof value === 'string') {
+            const date = this.dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
+            if (this.dateFormatter.dateIsValid(date)) {
+                dateValue = date;
             }
         }
-        else if (this.futureDisabled) {
-            return new Date();
+        return dateValue;
+    }
+    /**
+     * Validates the input value to ensure it is formatted correctly.
+     */
+    isDateStringValid(value) {
+        if (!value || typeof value !== 'string') {
+            return true;
         }
-        return this.configService.maxDate;
+        // Does the value only include digits, dashes, or slashes?
+        const regexp = /^[\d/-]+$/;
+        const isValid = regexp.test(value);
+        if (isValid) {
+            return true;
+        }
+        // If not, does it conform to the standard ISO format?
+        const isValidIso = moment(value, moment.ISO_8601).isValid();
+        return isValidIso;
     }
-    getMinDate() {
-        if (this.minDate) {
-            const minDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
-            if (minDate.isValid()) {
-                return minDate.toDate();
-            }
+    updatePlaceholder() {
+        if (!this.initialPlaceholder) {
+            this.adapter.setPlaceholder(this.elementRef, this.dateFormat);
         }
-        return this.configService.minDate;
     }
-    /* istanbul ignore next */
-    fuzzyDatesEqual(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));
+    /**
+     * Update the value of the form control and input element
+     * @param emitEvent Denotes if we emit an event to the consumer's form control. We do not want to do this if the value is being updated via a `setValue` call or a `patchValue` call as this is already handled by Angular.
+     * In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
+     */
+    updateValue(value, emitEvent = true) {
+        var _a, _b;
+        if (this._value === value) {
+            return;
+        }
+        const dateValue = this.getDateValue(value);
+        const areDatesEqual = this._value instanceof Date &&
+            dateValue &&
+            dateValue.getTime() === this._value.getTime();
+        const 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;
+            if (emitEvent) {
+                this.onChange(this._value);
+            }
+            else {
+                (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(this._value, { emitEvent: false });
+            }
+            this.datepickerComponent.selectedDate = this._value;
+        }
+        else if (dateValue !== this._value || !areDatesEqual) {
+            this._value = dateValue || value;
+            if (emitEvent) {
+                this.onChange(this._value);
+            }
+            else {
+                (_b = this.control) === null || _b === void 0 ? void 0 : _b.setValue(this._value, { emitEvent: false });
+            }
+            this.datepickerComponent.selectedDate = this._value;
+        }
+        if (dateValue && isValidDateString) {
+            const formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
+            this.setInputElementValue(formattedDate);
+        }
+        else {
+            this.setInputElementValue(value || '');
+        }
     }
 }
-SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
-        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-        SKY_FUZZY_DATEPICKER_VALIDATOR,
+SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
+        SKY_DATEPICKER_VALUE_ACCESSOR,
+        SKY_DATEPICKER_VALIDATOR,
+        SkyDatepickerAdapterService,
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[skyFuzzyDatepickerInput]',
+                    selector: '[skyDatepickerInput]',
                     providers: [
-                        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-                        SKY_FUZZY_DATEPICKER_VALIDATOR,
+                        SKY_DATEPICKER_VALUE_ACCESSOR,
+                        SKY_DATEPICKER_VALIDATOR,
+                        SkyDatepickerAdapterService,
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { dateFormat: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], futureDisabled: [{
-                type: Input
             }], maxDate: [{
                 type: Input
             }], minDate: [{
                 type: Input
-            }], skyDatepickerNoValidate: [{
+            }], skyDatepickerInput: [{
                 type: Input
-            }], skyFuzzyDatepickerInput: [{
+            }], skyDatepickerNoValidate: [{
                 type: Input
             }], startingDay: [{
                 type: Input
-            }], yearRequired: [{
+            }], strict: [{
                 type: Input
             }], onInputChange: [{
                 type: HostListener,
@@ -3182,9 +3201,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @dynamic
  */
 class SkyDateRangeRelativeValue {
-    // Abstract classes are not covered properly.
-    /* istanbul ignore next */
-    constructor() { }
     static get today() {
         const today = new Date();
         return {
@@ -3684,12 +3700,13 @@ let uniqueId = 0;
  * ```
  */
 class SkyDateRangePickerComponent {
-    constructor(changeDetector, dateRangeService, formBuilder, localeProvider, windowRef, themeSvc) {
+    constructor(changeDetector, dateRangeService, formBuilder, localeProvider, windowRef, ngZone, themeSvc) {
         this.changeDetector = changeDetector;
         this.dateRangeService = dateRangeService;
         this.formBuilder = formBuilder;
         this.localeProvider = localeProvider;
         this.windowRef = windowRef;
+        this.ngZone = ngZone;
         /**
          * Indicates whether to require users to specify a start date.
          * @default false
@@ -3706,11 +3723,11 @@ class SkyDateRangePickerComponent {
         this.showStartDatePicker = false;
         this.ngUnsubscribe = new Subject();
         this._disabled = false;
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_) => { };
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onValidatorChange = () => { };
         this.localeProvider
             .getLocaleInfo()
@@ -3833,24 +3850,27 @@ class SkyDateRangePickerComponent {
         this.updateCalculators().then(() => {
             this.addEventListeners();
             this.isReady = true;
-            this.resetFormGroupValue();
             this.showRelevantFormFields();
-            // Fill in any unprovided values after the calculators have been initialized.
-            // For example, if the control is initialized with only the `calculatorId`,
-            // allow the calculator to fill in the missing start and end dates.
-            const { startDate, endDate } = this.value;
-            const defaultValue = this.selectedCalculator.getValue(startDate, endDate);
-            const newValue = Object.assign({}, defaultValue, this.value);
-            this.setValue(newValue, false);
-            // 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
-            /* istanbul ignore else */
-            if (this.control) {
-                this.control.setValue(this.value, {
-                    emitEvent: false,
-                });
-            }
+            // We need to let Angular be stable and have rendered the components prior to setting the values and form controls. This ensures all initial validation will be ran correctly.
+            this.ngZone.onStable.pipe(first()).subscribe(() => {
+                // Fill in any unprovided values after the calculators have been initialized.
+                // For example, if the control is initialized with only the `calculatorId`,
+                // allow the calculator to fill in the missing start and end dates.
+                const { startDate, endDate } = this.value;
+                const defaultValue = this.selectedCalculator.getValue(startDate, endDate);
+                const newValue = Object.assign({}, defaultValue, this.value);
+                this.setValue(newValue, false);
+                this.resetFormGroupValue();
+                // 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
+                /* istanbul ignore else */
+                if (this.control) {
+                    this.control.setValue(this.value, {
+                        emitEvent: false,
+                    });
+                }
+            });
         });
     }
     ngOnChanges(changes) {
@@ -3989,46 +4009,26 @@ class SkyDateRangePickerComponent {
         this.changeDetector.markForCheck();
     }
     resetFormGroupValue(value) {
-        // Do not emit a value change event on the underlying form group
-        // because we're already watching for changes that are triggered by the end user.
-        // For example, if we change the value of the form group internally, we don't want the event
-        // listeners to be triggered, as those are reserved for user interactions.
-        // (See the event listeners listed below.)
-        this.formGroup.reset(value || this.value, {
-            emitEvent: false,
-        });
+        this.formGroup.reset(value || this.value);
     }
     addEventListeners() {
-        // Detect errors from the date pickers
-        // when control is initialized with a value.
-        combineLatest([
-            this.startDateControl.statusChanges,
-            this.endDateControl.statusChanges,
-        ])
-            .pipe(first())
-            .subscribe((status) => {
-            if (status.indexOf('INVALID') > -1) {
-                // Wait for initial validation to complete.
-                this.windowRef.nativeWindow.setTimeout(() => {
-                    this.onValidatorChange();
-                });
-            }
-        });
         // Watch for selected calculator change.
         this.calculatorIdControl.valueChanges
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            const id = parseInt(value, 10);
-            // if the component is disabled during form creation, null is passed
-            // as the value of the calculator id control
-            // only handle the value changes if the calculator id is a number
-            /* istanbul ignore else */
-            if (!isNaN(id)) {
-                const calculator = this.getCalculatorById(id);
-                const newValue = calculator.getValue();
-                this.setValue(newValue);
-                this.resetFormGroupValue(newValue);
-                this.showRelevantFormFields();
+            if (value !== this.value.calculatorId) {
+                const id = parseInt(value, 10);
+                // if the component is disabled during form creation, null is passed
+                // as the value of the calculator id control
+                // only handle the value changes if the calculator id is a number
+                /* istanbul ignore else */
+                if (!isNaN(id)) {
+                    const calculator = this.getCalculatorById(id);
+                    const newValue = calculator.getValue();
+                    this.setValue(newValue);
+                    this.resetFormGroupValue(newValue);
+                    this.showRelevantFormFields();
+                }
             }
         });
         // Watch for start date value changes.
@@ -4051,6 +4051,11 @@ class SkyDateRangePickerComponent {
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(() => {
             this.changeDetector.markForCheck();
+            // Wait for initial validation to complete.
+            this.ngZone.onStable.pipe(first()).subscribe(() => {
+                var _a;
+                (_a = this.control) === null || _a === void 0 ? void 0 : _a.updateValueAndValidity({ emitEvent: false });
+            });
         });
     }
     updateCalculators() {
@@ -4070,7 +4075,7 @@ class SkyDateRangePickerComponent {
         return JSON.stringify(rangeA) === JSON.stringify(rangeB);
     }
 }
-SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.FormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i1.SkyAppWindowRef }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.FormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i1.SkyAppWindowRef }, { token: i0.NgZone }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
         SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
         SKY_DATE_RANGE_PICKER_VALIDATOR,
@@ -4087,7 +4092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$2.FormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i1.SkyAppWindowRef }, { type: i3$2.SkyThemeService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$2.FormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i1.SkyAppWindowRef }, { type: i0.NgZone }, { type: i3$2.SkyThemeService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { calculatorIds: [{
                 type: Input
@@ -4177,7 +4182,6 @@ class SkyTimepickerComponent {
         return this._disabled;
     }
     set selectedHour(setHour) {
-        let hour;
         let hourOffset = 0;
         if (this.selectedMeridies === 'AM' && setHour === 12) {
             hourOffset = -12;
@@ -4188,7 +4192,7 @@ class SkyTimepickerComponent {
         if (this.is8601) {
             hourOffset = 0;
         }
-        hour = moment({ hour: setHour }).add(hourOffset, 'hours').hour();
+        const hour = moment({ hour: setHour }).add(hourOffset, 'hours').hour();
         this.activeTime = moment({
             hour: hour,
             minute: moment(this.activeTime).get('minute') + 0,
@@ -4308,9 +4312,9 @@ class SkyTimepickerComponent {
             localeFormat = 'HH:mm';
             this.is8601 = true;
         }
-        let data;
-        data = {
-            hours: Array.apply(undefined, Array(h)).map(function (x, i) {
+        const data = {
+            // Create a sparse array with a length equal to the hour.
+            hours: Array(...Array(h)).map((_, i) => {
                 if (format === 'hh') {
                     return ++i;
                 }
@@ -4322,7 +4326,8 @@ class SkyTimepickerComponent {
                 /* sanity check */
                 return 0;
             }),
-            minutes: Array.apply(undefined, Array(m)).map(function (x, i) {
+            // Create a sparse array with a length equal to the minute.
+            minutes: Array(...Array(m)).map(function (_, i) {
                 return i * minuteMultiplier;
             }),
             localeFormat: localeFormat,
@@ -4512,11 +4517,11 @@ class SkyTimepickerInputDirective {
         this.resourcesService = resourcesService;
         this.changeDetector = changeDetector;
         this._timeFormat = 'hh';
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onChange = (_) => { };
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouched = () => { };
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._validatorChange = () => { };
     }
     /**
@@ -4625,7 +4630,7 @@ class SkyTimepickerInputDirective {
         if (!this.control) {
             this.control = control;
         }
-        let value = control.value;
+        const value = control.value;
         if (!value) {
             return undefined;
         }
@@ -4659,7 +4664,6 @@ class SkyTimepickerInputDirective {
                 return '';
             }
             let currentFormat;
-            let formatTime;
             if (this.timeFormat === 'hh') {
                 currentFormat = 'h:mm A';
             }
@@ -4669,7 +4673,7 @@ class SkyTimepickerInputDirective {
             if (typeof this.returnFormat === 'undefined') {
                 this.returnFormat = currentFormat;
             }
-            formatTime = {
+            const formatTime = {
                 hour: moment(time, currentFormat).hour(),
                 minute: moment(time, currentFormat).minute(),
                 meridie: moment(time, currentFormat).format('A'),