@progress/kendo-dateinputs-common 0.2.0-dev.202301061353 → 0.2.0-dev.202301101148

package/dist/es/common/dateobject.js

@@ -1,7 +1,7 @@
 import { addMonths, cloneDate, createDate, isEqual, getDate, lastDayOfMonth } from '@progress/kendo-date-math';
 import { Mask } from './mask';
 import { dateSymbolMap, padZero, unpadZero } from '../dateinput/utils';
-import { extend, isPresent, cropTwoDigitYear, setYears, parseToInt, clamp, areDatePartsEqualTo, isNumber } from './utils';
+import { extend, isPresent, cropTwoDigitYear, setYears, parseToInt, clamp, areDatePartsEqualTo, isNumber, isValidDate } from './utils';
 import { Constants } from './constants';
 var PREVIOUS_CENTURY_BASE = 1900;
 var CURRENT_CENTURY_BASE = 2000;
@@ -583,7 +583,7 @@ var DateObject = /** @class */ (function () {
      */
     DateObject.prototype.parsePart = function (_a) {
         var _b;
-        var symbol = _a.symbol, currentChar = _a.currentChar, resetSegmentValue = _a.resetSegmentValue, cycleSegmentValue = _a.cycleSegmentValue, rawTextValue = _a.rawTextValue, isDeleting = _a.isDeleting;
+        var symbol = _a.symbol, currentChar = _a.currentChar, resetSegmentValue = _a.resetSegmentValue, cycleSegmentValue = _a.cycleSegmentValue, rawInputValue = _a.rawTextValue, isDeleting = _a.isDeleting, originalFormat = _a.originalFormat;
         var isInCaretMode = !cycleSegmentValue;
         var dateParts = this.dateFormatString(this.value, this.format);
         var datePartsLiterals = dateParts.partMap
@@ -591,9 +591,20 @@ var DateObject = /** @class */ (function () {
             .map(function (x, index) {
             return {
                 datePartIndex: index,
-                literal: x.pattern
+                type: x.type,
+                pattern: x.pattern,
+                literal: ""
             };
         });
+        for (var i = 0; i < datePartsLiterals.length; i++) {
+            var datePart = datePartsLiterals[i];
+            for (var j = 0; j < datePart.pattern.length; j++) {
+                if (datePartsLiterals[i + j]) {
+                    datePartsLiterals[i + j].literal = datePart.pattern[j];
+                }
+            }
+            i += datePart.pattern.length - 1;
+        }
         var shouldResetPart = isInCaretMode && symbol === "M" && dateParts.partMap
             .filter(function (x) { return x.type === "month"; })
             .some(function (x) { return x.pattern.length > MONTH_PART_WITH_WORDS_THRESHOLD; });
@@ -606,9 +617,9 @@ var DateObject = /** @class */ (function () {
             if (isInCaretMode) {
                 for (var i = 0; i < datePartsLiterals.length; i++) {
                     var literal = datePartsLiterals[i].literal;
-                    var rawValueStartsWithLiteral = rawTextValue.startsWith(literal);
-                    var rawValueEndsWithLiteral = rawTextValue.endsWith(literal);
-                    var rawValueHasConsecutiveLiterals = rawTextValue.indexOf(literal + literal) >= 0;
+                    var rawValueStartsWithLiteral = rawInputValue.startsWith(literal);
+                    var rawValueEndsWithLiteral = rawInputValue.endsWith(literal);
+                    var rawValueHasConsecutiveLiterals = rawInputValue.indexOf(literal + literal) >= 0;
                     if (rawValueStartsWithLiteral || rawValueEndsWithLiteral || rawValueHasConsecutiveLiterals) {
                         this.resetLeadingZero();
                         this.setExisting(symbol, false);
@@ -631,38 +642,82 @@ var DateObject = /** @class */ (function () {
         var prefix = '';
         var current = '';
         var datePartText = '';
+        var basePrefix = '';
+        var baseSuffix = '';
         var suffix = '';
+        var datePartStartIndex = originalFormat.indexOf(symbol);
+        var datePartEndIndex = originalFormat.lastIndexOf(symbol);
+        var segmentLength = datePartEndIndex - datePartStartIndex + 1;
+        var hasFixedFormat = (this.format === baseFormat) ||
+            (this.format === originalFormat) ||
+            (this.format.length === originalFormat.length);
         if (isInCaretMode) {
-            var datePartIndex = 0;
-            var outOfDatePartBounds = false;
+            var processedSegmentCharsCount = 0;
             for (var i = 0; i < baseDate.length; i++) {
-                var datePartLiteral = datePartsLiterals[datePartIndex];
-                if (datePartLiteral && datePartLiteral === baseDate[i]) {
-                    datePartIndex++;
-                }
                 if (baseFormat[i] === symbol) {
                     var existing = this.getExisting(symbol);
                     current += existing ? baseDate[i] : '0';
-                    var rawInputChar = rawTextValue[i];
-                    if (rawInputChar !== baseDate[i] && rawInputChar === datePartsLiterals[datePartIndex].literal) {
-                        outOfDatePartBounds = true;
-                    }
-                    else if (!outOfDatePartBounds) {
-                        if (rawInputChar === undefined) {
-                            var formatOffset = Math.abs(this.format.length - baseFormat.length);
-                            datePartText += rawTextValue[i - formatOffset] || '';
-                        }
-                        else {
-                            datePartText += rawInputChar || '';
+                    if (isDeleting) {
+                        // when deleting, process (segmentLength - 1) chars
+                        if (processedSegmentCharsCount < segmentLength - 1) {
+                            datePartText += rawInputValue[i] || "";
                         }
+                        processedSegmentCharsCount++;
+                    }
+                    else {
+                        datePartText += rawInputValue[i] || "";
                     }
                     replaced = true;
                 }
                 else if (!replaced) {
                     prefix += baseDate[i];
+                    basePrefix += baseDate[i];
                 }
                 else {
                     suffix += baseDate[i];
+                    baseSuffix += baseDate[i];
+                }
+            }
+            if (hasFixedFormat) {
+                if (originalFormat.length < rawInputValue.length) {
+                    datePartText += currentChar;
+                }
+                if (datePartText.length > segmentLength) {
+                    return extend(parseResult, { value: null, switchToNext: false });
+                }
+            }
+            else {
+                processedSegmentCharsCount = 0;
+                current = "";
+                datePartText = "";
+                prefix = "";
+                suffix = "";
+                replaced = false;
+                for (var i = 0; i < originalFormat.length; i++) {
+                    if (originalFormat[i] === symbol) {
+                        var existing = this.getExisting(symbol);
+                        current += existing ? baseDate[i] || "" : '0';
+                        if (isDeleting) {
+                            // when deleting, process (segmentLength - 1) chars
+                            if (processedSegmentCharsCount < segmentLength - 1) {
+                                datePartText += rawInputValue[i] || "";
+                            }
+                            processedSegmentCharsCount++;
+                        }
+                        else {
+                            datePartText += rawInputValue[i] || "";
+                        }
+                        replaced = true;
+                    }
+                    else if (!replaced) {
+                        prefix += rawInputValue[i] || "";
+                    }
+                    else {
+                        suffix += rawInputValue[i] || "";
+                    }
+                }
+                if (originalFormat.length < rawInputValue.length) {
+                    datePartText += currentChar;
                 }
             }
         }
@@ -697,10 +752,6 @@ var DateObject = /** @class */ (function () {
         }
         var partPattern = this.partPattern(dateParts.partMap, symbol);
         var patternValue = partPattern ? partPattern.pattern : null;
-        if (isInCaretMode && isDeleting) {
-            var padPrefix = padZero(Math.abs(current.length - datePartText.length));
-            current = padPrefix + datePartText;
-        }
         if (isInCaretMode) {
             if (isDeleting && !datePartText) {
                 this.setExisting(symbol, false);
@@ -716,14 +767,29 @@ var DateObject = /** @class */ (function () {
             if (!this.autoCorrectParts) {
                 tryParse = false;
             }
-            var middle = resetSegmentValue ? currentChar : (current.substring(i) + currentChar);
-            if (!tryParse && isInCaretMode) {
+            var middle = resetSegmentValue ?
+                currentChar :
+                isInCaretMode ?
+                    datePartText :
+                    (current.substring(i) + currentChar);
+            if (isInCaretMode) {
                 // try to make an exact match as there will be only 1 attempt
+                tryParse = false;
                 middle = unpadZero(middle);
             }
             var middleNumber = parseInt(middle, 10);
             var candidateDateString = prefix + middle + suffix;
             parsedDate = this.intl.parseDate(candidateDateString, this.format, this.localeId);
+            if (isInCaretMode && !hasFixedFormat && !isValidDate(parsedDate)) {
+                // if part of the date is not available, e.g. "d"
+                // but an expanded format like "F" is used
+                // the element value can be "EEEE, February 1, 2022 3:04:05 AM"
+                // which is not parsable by intl
+                // use the base prefix and suffix, e.g. convert the candidate date string
+                // to "Thursday, February 1, 2022 3:04:05 AM"
+                // as "EEEE, February..." is not parsable
+                parsedDate = this.intl.parseDate(basePrefix + middle + baseSuffix, this.format, this.localeId);
+            }
             var isCurrentCharParsable = !isNaN(parseInt(currentChar, 10)) || (isInCaretMode && isDeleting && currentChar === "");
             if (!parsedDate && !isNaN(middleNumber) && isCurrentCharParsable) {
                 if (symbol === MONTH_SYMBOL && !month) {
@@ -739,18 +805,22 @@ var DateObject = /** @class */ (function () {
                 }
                 if (symbol === 'y') {
                     parsedDate = createDate(parseInt(middle, 10), this.month ? this.value.getMonth() : 0, this.date ? this.value.getDate() : 1, this.hours ? this.value.getHours() : 0, this.minutes ? this.value.getMinutes() : 0, this.seconds ? this.value.getSeconds() : 0, this.milliseconds ? this.value.getMilliseconds() : 0);
-                    if (this.date && parsedDate.getDate() !== this.value.getDate()) {
+                    if (((isInCaretMode && isValidDate(parsedDate)) ||
+                        (!isInCaretMode && parsedDate)) && this.date && parsedDate.getDate() !== this.value.getDate()) {
                         parsedDate = lastDayOfMonth(addMonths(parsedDate, -1));
                     }
                 }
             }
-            if (parsedDate) {
+            if ((isInCaretMode && isValidDate(parsedDate)) || (!isInCaretMode && parsedDate)) {
                 // move to next segment if the part will overflow with next char
                 // when start from empty date (01, then 010), padded zeros should be trimmed
                 var peekDate = this.intl.parseDate("" + prefix + this.peek(middle, patternValue) + suffix, this.format, this.localeId);
                 var patternLength = this.patternLength(patternValue) || patternValue.length;
-                var patternSatisfied = (leadingZero + (unpadZero(middle) || currentChar).length) >= patternLength;
-                var switchToNext = peekDate === null || patternSatisfied;
+                var leadingZeroOffset = (this.leadingZero || {})[symbol] || 0;
+                var patternSatisfied = (leadingZeroOffset + (unpadZero(middle) || currentChar).length) >= patternLength;
+                var switchToNext = peekDate === null ||
+                    (leadingZero[symbol] && patternValue.length <= middle.length) ||
+                    patternSatisfied;
                 if (this.shouldNormalizeCentury()) {
                     parsedDate = this.normalizeCentury(parsedDate);
                 }
@@ -778,6 +848,9 @@ var DateObject = /** @class */ (function () {
             this.leadingZero = !this.isAbbrMonth(dateParts.partMap, symbol) ? (_b = {}, _b[symbol] = true, _b) : null;
             this.setExisting(symbol, false);
         }
+        if (isInCaretMode && datePartText.length > segmentLength) {
+            return extend(parseResult, { value: null, switchToNext: false });
+        }
         if (!this.autoCorrectParts) {
             this.setExisting(symbol, false);
             // todo check if string is better
@@ -793,11 +866,14 @@ var DateObject = /** @class */ (function () {
             }
             if (isNumber(datePartValue)) {
                 var newDate = this.modifyDateSymbolWithValue(this.value, symbol, datePartValue);
+                // if (!isEqual(newDate, this.value)) {
+                this.setExisting(symbol, false);
                 this.setInvalidDatePart(symbol, {
                     value: datePartValue,
                     date: cloneDate(newDate),
                     startDate: this._partiallyInvalidDate.startDate || cloneDate(this.value)
                 });
+                // }
             }
         }
         return extend(parseResult, { value: null, switchToNext: false });
@@ -961,8 +1037,8 @@ var DateObject = /** @class */ (function () {
         var resultText = '';
         var resultFormat = '';
         var format = mask.symbols;
-        for (var formatSymbolIndex = format.length - 1; formatSymbolIndex >= 0; formatSymbolIndex--) {
-            if (this.knownParts.indexOf(format[formatSymbolIndex]) === -1 || this.getExisting(format[formatSymbolIndex])) {
+        var _loop_1 = function (formatSymbolIndex) {
+            if (this_1.knownParts.indexOf(format[formatSymbolIndex]) === -1 || this_1.getExisting(format[formatSymbolIndex])) {
                 resultText = text[formatSymbolIndex] + resultText;
                 resultFormat = format[formatSymbolIndex] + resultFormat;
             }
@@ -972,22 +1048,31 @@ var DateObject = /** @class */ (function () {
                     formatSymbolIndex--;
                 }
                 formatSymbolIndex++;
-                if (this.leadingZero && this.leadingZero[symbol]) {
+                if (this_1.leadingZero && this_1.leadingZero[symbol]) {
                     resultText = '0' + resultText;
                 }
                 else {
-                    if (!this.autoCorrectParts && this.getInvalidDatePartValue(symbol)) {
-                        var segmentText = text.substr(formatSymbolIndex, mask.partMap[formatSymbolIndex].pattern.length);
+                    if (!this_1.autoCorrectParts && this_1.getInvalidDatePartValue(symbol)) {
+                        // use mask.symbols instead of mask.partMap
+                        var part_1 = mask.partMap[formatSymbolIndex];
+                        var pattern = mask.partMap.filter(function (x) { return x.type === part_1.type && x.pattern === part_1.pattern; });
+                        var segmentText = text.substr(formatSymbolIndex, pattern.length);
                         resultText = segmentText + resultText;
                     }
                     else {
-                        resultText = this.dateFieldName(mask.partMap[formatSymbolIndex]) + resultText;
+                        resultText = this_1.dateFieldName(mask.partMap[formatSymbolIndex]) + resultText;
                     }
                 }
                 while (resultFormat.length < resultText.length) {
                     resultFormat = format[formatSymbolIndex] + resultFormat;
                 }
             }
+            out_formatSymbolIndex_1 = formatSymbolIndex;
+        };
+        var this_1 = this, out_formatSymbolIndex_1;
+        for (var formatSymbolIndex = format.length - 1; formatSymbolIndex >= 0; formatSymbolIndex--) {
+            _loop_1(formatSymbolIndex);
+            formatSymbolIndex = out_formatSymbolIndex_1;
         }
         return { text: resultText, format: resultFormat };
     };

package/dist/es/common/utils.js

@@ -125,4 +125,4 @@ export var areDatePartsEqualTo = function (date, year, month, day, hour, minutes
 /**
  * @hidden
  */
-export var isDate = function (value) { return isPresent(value) && value.getTime && isNumber(value.getTime()); };
+export var isValidDate = function (value) { return isPresent(value) && value.getTime && isNumber(value.getTime()); };

package/dist/es/dateinput/dateinput.js

@@ -4,7 +4,7 @@ import { DateObject } from '../common/dateobject';
 import { approximateStringMatching } from './utils';
 import { KeyCode } from '../common/keycode';
 import { Key } from '../common/key';
-import { extend, isPresent, isDocumentAvailable, millisecondDigitsInFormat, millisecondStepFor, isDate } from '../common/utils';
+import { extend, isPresent, isDocumentAvailable, millisecondDigitsInFormat, millisecondStepFor, isValidDate } from '../common/utils';
 import { Observable } from '../common/observable';
 import { DateInputInteractionMode } from './interaction-mode';
 import { isEqual, cloneDate } from '@progress/kendo-date-math';
@@ -74,7 +74,7 @@ var DateInput = /** @class */ (function (_super) {
         _this.currentText = '';
         _this.currentFormat = '';
         _this.interactionMode = DateInputInteractionMode.None;
-        _this.localeId = Constants.defaultLocaleId;
+        _this.previousElementSelection = { start: 0, end: 0 };
         _this.init(element, options);
         return _this;
     }
@@ -86,12 +86,12 @@ var DateInput = /** @class */ (function (_super) {
         configurable: true
     });
     DateInput.prototype.init = function (element, options) {
-        var dateValue = isDate(this.options.value) ? cloneDate(this.options.value) : new Date(options.formattedValue);
-        if (!isDate(dateValue)) {
+        var dateValue = isValidDate(this.options.value) ? cloneDate(this.options.value) : new Date(options.formattedValue);
+        if (!isValidDate(dateValue)) {
             dateValue = null;
         }
         this.element = element;
-        // this.element._kendoWidget = this;
+        this.element._kendoWidget = this;
         this.options = extend({}, defaultDateInputOptions, options);
         this.intl = this.options.intlService;
         this.formatPlaceholder = this.options.formatPlaceholder ? this.options.formatPlaceholder : 'formatPattern';
@@ -272,33 +272,48 @@ var DateInput = /** @class */ (function (_super) {
         var hasCaret = this.isInCaretMode();
         if (hasCaret && this.keyDownEvent.key === Key.SPACE) {
             // do not allow custom "holes" in the date segments
-            this.setPreviousInputEventState(this.keyDownEvent);
+            this.restorePreviousInputEventState();
             return;
         }
         var oldDateObjectValue = this.dateObject && this.dateObject.getValue();
         var _a = this.dateObject.getTextAndFormat(), currentText = _a.text, currentFormat = _a.format;
         this.currentFormat = currentFormat;
-        var text = hasCaret && (isBackspaceKey || isDeleteKey) ? this.previousElementValue : currentText;
+        var text = "";
+        if (hasCaret) {
+            if (isBackspaceKey || isDeleteKey) {
+                text = this.previousElementValue;
+            }
+            else if (originalInteractionMode === DateInputInteractionMode.Caret) {
+                text = this.previousElementValue;
+            }
+            else {
+                text = currentText;
+            }
+        }
+        else {
+            text = currentText;
+        }
+        var newText = this.elementValue;
         var diff = approximateStringMatching({
             oldText: text,
-            newText: this.element.value,
+            newText: newText,
             formatPattern: this.currentFormat,
             selectionStart: this.selection.start,
             isInCaretMode: hasCaret,
             keyEvent: this.keyDownEvent
         });
         if (hasCaret && (!diff || diff.length === 0)) {
-            this.setPreviousInputEventState(this.keyDownEvent);
+            this.restorePreviousInputEventState();
             return;
         }
         else if (hasCaret && diff.length === 1) {
             if (!diff[0] || !diff[0][0]) {
-                this.setPreviousInputEventState(this.keyDownEvent);
+                this.restorePreviousInputEventState();
                 return;
             }
             else if (hasCaret && diff[0] &&
                 (diff[0][0] === Constants.formatSeparator || diff[0][1] === Constants.formatSeparator)) {
-                this.setPreviousInputEventState(this.keyDownEvent);
+                this.restorePreviousInputEventState();
                 return;
             }
         }
@@ -313,7 +328,8 @@ var DateInput = /** @class */ (function (_super) {
                     resetSegmentValue: this.resetSegmentValue,
                     cycleSegmentValue: !this.isInCaretMode(),
                     rawTextValue: this.element.value,
-                    isDeleting: isBackspaceKey || isDeleteKey
+                    isDeleting: isBackspaceKey || isDeleteKey,
+                    originalFormat: this.currentFormat
                 });
                 parsePartsResults.push(parsePartResult);
                 switchPart = parsePartResult.switchToNext;
@@ -351,6 +367,29 @@ var DateInput = /** @class */ (function (_super) {
                     }
                 }
             }
+            else if (hasCaret) {
+                if (this.options.format.length !== this.currentFormat.length) {
+                    if (hasDateValueChanged && isPresent(this.dateObject.value)) {
+                        var elementValueLength = this.elementValue.length;
+                        this.forceUpdate();
+                        var selectionOffset = this.elementValue.length - elementValueLength;
+                        this.setSelection({
+                            start: currentSelection.start + selectionOffset,
+                            end: currentSelection.start + selectionOffset
+                        });
+                    }
+                }
+                else {
+                    if (hasDateValueChanged) {
+                        if (lastParseResultHasNoValue) {
+                            this.restorePreviousInputEventState();
+                        }
+                    }
+                    else {
+                        this.restorePreviousInputEventState();
+                    }
+                }
+            }
         }
         if (!switchPart && hasCaret && !isBackspaceKey && !isDeleteKey && !resetPart && lastParseResultHasNoValue) {
             if (hasDateValueChanged) {
@@ -367,10 +406,13 @@ var DateInput = /** @class */ (function (_super) {
                         this.setSelection(this.selectionBySymbol(symbolForSelection));
                     }
                     else {
-                        this.setPreviousInputEventState(this.keyDownEvent);
+                        this.restorePreviousInputEventState();
                     }
                 }
             }
+            else {
+                this.restorePreviousInputEventState();
+            }
         }
         else if (this.options.autoSwitchParts && (switchPart || navigationOnly)) {
             if (!hasCaret) {
@@ -382,6 +424,12 @@ var DateInput = /** @class */ (function (_super) {
             event: e
         });
         this.triggerInputEnd({ event: e });
+        if (hasCaret) {
+            // a format like "F" can dynamically change the resolved format pattern based on the value, e.g.
+            // "Tuesday, February 1, 2022 3:04:05 AM" becomes
+            // "Wednesday, February 2, 2022 3:04:05 AM" giving a diff of 2 ("Tuesday".length - "Wednesday".length)
+            this.setTextAndFormat();
+        }
     };
     /**
      * @hidden
@@ -427,6 +475,8 @@ var DateInput = /** @class */ (function (_super) {
         }
         this.keyDownEvent = e;
         this.previousElementValue = this.element.value;
+        var _a = this.selection, start = _a.start, end = _a.end;
+        this.previousElementSelection = { start: start, end: end };
         var autoSwitchKeys = (this.options.autoSwitchKeys || [])
             .map(function (x) { return x.toString().toLowerCase().trim(); });
         if (autoSwitchKeys.indexOf(e.keyCode.toString()) >= 0 ||
@@ -436,7 +486,7 @@ var DateInput = /** @class */ (function (_super) {
                 autoSwitchKeys.indexOf(KeyCode.TAB) >= 0 ||
                 autoSwitchKeys.indexOf(KeyCode.TAB.toString()) >= 0;
             if (isTabKey) {
-                var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
+                var _b = this.selection, selectionStart = _b.start, selectionEnd = _b.end;
                 if (e.shiftKey && isTabKey) {
                     this.switchDateSegment(-1);
                 }
@@ -838,7 +888,6 @@ var DateInput = /** @class */ (function (_super) {
      * @hidden
      */
     DateInput.prototype.setElementValue = function (value) {
-        this.previousElementValue = this.element.value;
         this.element.value = value;
     };
     /**
@@ -874,23 +923,25 @@ var DateInput = /** @class */ (function (_super) {
         }
         /* eslint-enable no-fallthrough */
     };
-    DateInput.prototype.setPreviousInputEventState = function (keyDownEvent) {
-        var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
-        var selectionOffset = -1;
-        if (keyDownEvent.keyCode === KeyCode.BACKSPACE) {
-            selectionOffset = 1;
-        }
-        else if (keyDownEvent.keyCode === KeyCode.DELETE) {
-            selectionOffset = 0;
-        }
-        else if (keyDownEvent.keyCode === KeyCode.SPACE) {
-            selectionOffset = -1;
-        }
-        else {
-            selectionOffset = -1;
-        }
+    /**
+     * @hidden
+     */
+    DateInput.prototype.restorePreviousInputEventState = function () {
+        this.restorePreviousElementValue();
+        this.restorePreviousElementSelection();
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.restorePreviousElementValue = function () {
         this.setElementValue(this.previousElementValue || '');
-        this.setSelection({ start: selectionStart + selectionOffset, end: selectionEnd + selectionOffset });
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.restorePreviousElementSelection = function () {
+        var _a = this.previousElementSelection, start = _a.start, end = _a.end;
+        this.setSelection({ start: start || 0, end: end || 0 });
     };
     DateInput.prototype.writeValue = function (value) {
         this.verifyValue(value);
@@ -898,7 +949,7 @@ var DateInput = /** @class */ (function (_super) {
         this.refreshElementValue();
     };
     DateInput.prototype.verifyValue = function (value) {
-        if (value && !isDate(value)) {
+        if (value && !isValidDate(value)) {
             throw new Error("The 'value' should be a valid JavaScript Date instance.");
         }
     };
@@ -916,6 +967,7 @@ var DateInput = /** @class */ (function (_super) {
             element.placeholder = this.options.placeholder;
         }
         var newElementValue = !showPlaceholder ? currentText : "";
+        this.previousElementValue = this.elementValue;
         this.setElementValue(newElementValue);
         if (this.isActive && !this.options.allowCaretMode && this.options.selectNearestSegmentOnFocus) {
             this.selectNearestSegment(start);
@@ -999,10 +1051,10 @@ var DateInput = /** @class */ (function (_super) {
             intlService: this.intl,
             formatPlaceholder: this.formatPlaceholder,
             format: this.inputFormat,
-            localeId: this.localeId,
             cycleTime: this.options.cycleTime,
             twoDigitYearMax: this.options.twoDigitYearMax,
-            autoCorrectParts: this.options.autoCorrectParts
+            autoCorrectParts: this.options.autoCorrectParts,
+            value: this.options.value
         }, options));
         return dateObject;
     };

package/dist/es/dateinput/utils.js

@@ -53,27 +53,23 @@ export var approximateStringMatching = function (_a) {
         Handle the typing over a literal as well.
     */
     if ((isInCaretMode &&
-        newSegmentText.indexOf(oldSegmentText) === 0 && formatPattern[selectionStart - 1]) ||
+        (newSegmentText.indexOf(oldSegmentText) === 0 ||
+            formatPattern[selectionStart - 1] === Constants.formatSeparator)) ||
         (!isInCaretMode &&
             (newSegmentText.indexOf(oldSegmentText) === 0 ||
                 formatPattern[selectionStart - 1] === Constants.formatSeparator))) {
-        if (isInCaretMode) {
-            var symbol = formatPattern[selectionStart - 1];
-            return [[symbol, newSegmentText[selectionStart - 1]]];
-        }
-        else {
-            var symbol = formatPattern[0];
-            for (var i = Math.max(0, oldSegmentText.length - 1); i < formatPattern.length; i++) {
-                if (formatPattern[i] !== Constants.formatSeparator) {
-                    symbol = formatPattern[i];
-                    break;
-                }
+        var symbol = formatPattern[0];
+        for (var i = Math.max(0, oldSegmentText.length - 1); i < formatPattern.length; i++) {
+            if (formatPattern[i] !== Constants.formatSeparator) {
+                symbol = formatPattern[i];
+                break;
             }
-            return [[symbol, newSegmentText[selectionStart - 1]]];
         }
+        return [[symbol, newSegmentText[selectionStart - 1]]];
     }
     /* Handle the entering of a space or a separator for navigating to the next item. */
-    if (newSegmentText[newSegmentText.length - 1] === ' ' || newSegmentText[newSegmentText.length - 1] === oldTextSeparator) {
+    if ((!isInCaretMode && newSegmentText[newSegmentText.length - 1] === ' ') ||
+        (!isInCaretMode && newSegmentText[newSegmentText.length - 1] === oldTextSeparator)) {
         return [[formatPattern[selectionStart - 1], Constants.formatSeparator]];
     }
     /* Handle typing over a correctly selected part. */