@skyux/datetime 6.0.0-beta.5 → 6.0.0-beta.8

package/fesm2020/skyux-datetime.mjs

@@ -2675,10 +2675,13 @@ class SkyDatepickerInputDirective {
         this.dateFormatter = new SkyDateFormatter();
         this.ngUnsubscribe = new Subject();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
+        // istanbul ignore next
         this.onChange = (_) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
+        // istanbul ignore next
         this.onTouched = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
+        // istanbul ignore next
         this.onValidatorChange = () => { };
         this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
         this.updatePlaceholder();
@@ -2887,9 +2890,40 @@ class SkyDatepickerInputDirective {
         if (!value) {
             return;
         }
-        const dateValue = this.getDateValue(value);
-        const isDateValid = dateValue && this.dateFormatter.dateIsValid(dateValue);
-        if (!isDateValid || !this.isDateStringValid(value)) {
+        if (value instanceof Date) {
+            const isDateValid = this.dateFormatter.dateIsValid(value);
+            if (!isDateValid) {
+                // 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,
+                    },
+                };
+            }
+            const minDate = this.minDate;
+            if (minDate &&
+                this.dateFormatter.dateIsValid(minDate) &&
+                value < minDate) {
+                return {
+                    skyDate: {
+                        minDate,
+                    },
+                };
+            }
+            const maxDate = this.maxDate;
+            if (maxDate &&
+                this.dateFormatter.dateIsValid(maxDate) &&
+                value > maxDate) {
+                return {
+                    skyDate: {
+                        maxDate,
+                    },
+                };
+            }
+        }
+        else {
             // 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();
@@ -2899,22 +2933,6 @@ class SkyDatepickerInputDirective {
                 },
             };
         }
-        const minDate = this.minDate;
-        if (minDate && this.dateFormatter.dateIsValid(minDate) && value < minDate) {
-            return {
-                skyDate: {
-                    minDate,
-                },
-            };
-        }
-        const maxDate = this.maxDate;
-        if (maxDate && this.dateFormatter.dateIsValid(maxDate) && value > maxDate) {
-            return {
-                skyDate: {
-                    maxDate,
-                },
-            };
-        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2950,18 +2968,40 @@ class SkyDatepickerInputDirective {
     setInputElementValue(value) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
     }
+    /**
+     * Gets the date value from a value - if possible.
+     * Will not convert unconvertable dates or numbers outside of the current month's number of days.
+     * Returns `undefined` if the value can not be converted.
+     */
     getDateValue(value) {
-        let dateValue;
         if (value instanceof Date) {
-            dateValue = value;
+            return value;
         }
         else if (typeof value === 'string') {
+            return this.getShortcutOrDateValue(value);
+        }
+    }
+    /**
+     * Converts a string to a date object if the string is a valid date string.
+     * It will also convert numeric input to a date if that number is within the current month's number of days.
+     * If the string can not be converted, `undefined` be returned.
+     */
+    getShortcutOrDateValue(value) {
+        const num = Number(value);
+        if (Number.isInteger(num)) {
+            const now = new Date();
+            const shortcutDate = new Date(now.getFullYear(), now.getMonth(), num);
+            const daysInMonth = shortcutDate.getDate();
+            if (num > 0 && num <= daysInMonth) {
+                return shortcutDate;
+            }
+        }
+        else {
             const date = this.dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
             if (this.dateFormatter.dateIsValid(date)) {
-                dateValue = date;
+                return date;
             }
         }
-        return dateValue;
     }
     /**
      * Validates the input value to ensure it is formatted correctly.
@@ -2994,10 +3034,6 @@ class SkyDatepickerInputDirective {
         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.)
@@ -3010,23 +3046,32 @@ class SkyDatepickerInputDirective {
                 this.control?.setValue(this._value, { emitEvent: false });
             }
             this.datepickerComponent.selectedDate = this._value;
+            this.setInputElementValue(value || '');
         }
-        else if (dateValue !== this._value || !areDatesEqual) {
-            this._value = dateValue || value;
-            if (emitEvent) {
-                this.onChange(this._value);
+        else {
+            // This value represents the date value for the input if possible.
+            // This value will take into account all shortcut functionality.
+            const dateValue = this.getDateValue(value);
+            const areDatesEqual = this._value instanceof Date &&
+                dateValue &&
+                dateValue.getTime() === this._value.getTime();
+            if (dateValue !== this._value || !areDatesEqual) {
+                this._value = dateValue || value;
+                if (emitEvent) {
+                    this.onChange(this._value);
+                }
+                else {
+                    this.control?.setValue(this._value, { emitEvent: false });
+                }
+                this.datepickerComponent.selectedDate = this._value;
+            }
+            if (dateValue) {
+                const formattedDateString = this.dateFormatter.format(dateValue, this.dateFormat);
+                this.setInputElementValue(formattedDateString);
             }
             else {
-                this.control?.setValue(this._value, { emitEvent: false });
+                this.setInputElementValue(value || '');
             }
-            this.datepickerComponent.selectedDate = this._value;
-        }
-        if (dateValue && isValidDateString) {
-            const formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
-            this.setInputElementValue(formattedDate);
-        }
-        else {
-            this.setInputElementValue(value || '');
         }
     }
 }