@skyux/datetime 5.5.0 → 5.6.0

package/fesm2015/skyux-datetime.js

@@ -15,10 +15,10 @@ 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 {
@@ -293,10 +293,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 +348,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 +368,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 +451,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 +502,7 @@ class SkyFuzzyDateService {
         };
     }
     getCurrentFuzzyDate() {
-        let currentDate = moment();
+        const currentDate = moment();
         return {
             day: currentDate.date(),
             month: currentDate.month() + 1,
@@ -523,7 +523,7 @@ class SkyFuzzyDateService {
      */
     getDateSeparator(dateFormat) {
         let returnValue;
-        let separators = ['/', '.', '-', ' '];
+        const separators = ['/', '.', '-', ' '];
         separators.forEach((separator) => {
             if (!returnValue && dateFormat.indexOf(separator) > 0) {
                 returnValue = separator;
@@ -591,7 +591,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 +900,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 +1083,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 +1105,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 +1119,7 @@ class SkyDatepickerCalendarInnerComponent {
         return dateObject;
     }
     createCalendarRows(dates, size) {
-        let rows = [];
+        const rows = [];
         while (dates.length > 0) {
             rows.push(dates.splice(0, size));
         }
@@ -1160,7 +1129,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 +1178,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 +1247,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 +1494,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 +1507,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 +1527,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 +1567,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 +1683,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 +1716,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 +1767,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 +2239,63 @@ 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;
         this.onChange = (_) => { };
         /*istanbul ignore next */
         this.onTouched = () => { };
         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,54 +2313,57 @@ 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) { }
     /**
      * 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
@@ -2374,54 +2379,79 @@ 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();
+        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 (dateValue && isValidDateString) {
-            const formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
-            this.setInputElementValue(formattedDate);
+        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 {
-            this.setInputElementValue(value || '');
+            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 || '');
     }
     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,8 +2463,7 @@ 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;
@@ -2456,33 +2485,20 @@ 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();
@@ -2497,38 +2513,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,14 +2599,6 @@ 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;
@@ -2565,87 +2606,69 @@ class SkyDatepickerInputDirective {
     setInputElementValue(value) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
     }
-    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;
+    getMaxDate() {
+        if (this.maxDate) {
+            const maxDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
+            if (maxDate.isValid()) {
+                return maxDate.toDate();
             }
         }
-        return dateValue;
-    }
-    /**
-     * Validates the input value to ensure it is formatted correctly.
-     */
-    isDateStringValid(value) {
-        if (!value || typeof value !== 'string') {
-            return true;
-        }
-        // Does the value only include digits, dashes, or slashes?
-        const regexp = /^[\d\/\-]+$/;
-        const isValid = regexp.test(value);
-        if (isValid) {
-            return true;
+        else if (this.futureDisabled) {
+            return new Date();
         }
-        // If not, does it conform to the standard ISO format?
-        const isValidIso = moment(value, moment.ISO_8601).isValid();
-        return isValidIso;
+        return this.configService.maxDate;
     }
-    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();
-        }
-        if (this.isFirstChange && this._value) {
-            this.isFirstChange = false;
+    getMinDate() {
+        if (this.minDate) {
+            const minDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
+            if (minDate.isValid()) {
+                return minDate.toDate();
+            }
         }
-        this.datepickerComponent.selectedDate = this._value;
+        return this.configService.minDate;
     }
-    updatePlaceholder() {
-        if (!this.initialPlaceholder) {
-            this.adapter.setPlaceholder(this.elementRef, this.dateFormat);
-        }
+    /* 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));
     }
 }
-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 +2682,61 @@ 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;
         this.onChange = (_) => { };
         /*istanbul ignore next */
         this.onTouched = () => { };
         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 +2754,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 +2817,54 @@ 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);
+        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 (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 if (dateValue !== this._value || !areDatesEqual) {
+            this._value = dateValue || value;
+            this.notifyUpdatedValue();
         }
-        else {
-            fuzzyDate = value;
-            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
-            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
-            if (fuzzyMoment) {
-                dateValue = fuzzyMoment.toDate();
-            }
+        if (dateValue && isValidDateString) {
+            const formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
+            this.setInputElementValue(formattedDate);
         }
-        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;
+        else {
+            this.setInputElementValue(value || '');
         }
-        this.setInputElementValue(formattedDate || '');
     }
     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 `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,7 +2876,8 @@ 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;
@@ -2905,20 +2899,33 @@ 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();
@@ -2933,71 +2940,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,6 +2993,14 @@ 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;
@@ -3026,69 +3008,87 @@ class SkyFuzzyDatepickerInputDirective {
     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();
-            }
+    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();
         }
-        return this.configService.minDate;
+        if (this.isFirstChange && this._value) {
+            this.isFirstChange = false;
+        }
+        this.datepickerComponent.selectedDate = this._value;
     }
-    /* 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));
+    updatePlaceholder() {
+        if (!this.initialPlaceholder) {
+            this.adapter.setPlaceholder(this.elementRef, this.dateFormat);
+        }
     }
 }
-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,
@@ -4625,7 +4625,7 @@ class SkyTimepickerInputDirective {
         if (!this.control) {
             this.control = control;
         }
-        let value = control.value;
+        const value = control.value;
         if (!value) {
             return undefined;
         }