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

package/dist/es/common/dateobject.js

@@ -158,16 +158,18 @@ var DateObject = /** @class */ (function () {
                     partiallyInvalidText += text[i];
                 }
                 else if (this.getInvalidDatePartValue(symbol)) {
+                    var partsForSegment = this.getPartsForSegment(mask, i);
                     if (symbol === "M") {
-                        if (mask.partMap[i].pattern.length > MONTH_PART_WITH_WORDS_THRESHOLD) {
+                        var datePartText = (parseToInt(this.getInvalidDatePartValue(symbol)) + JS_MONTH_OFFSET).toString();
+                        if (partsForSegment.length > MONTH_PART_WITH_WORDS_THRESHOLD) {
                             partiallyInvalidText += formattedDates[symbol][i];
                         }
                         else {
                             if (this.getInvalidDatePartValue(symbol)) {
-                                var month = parseToInt(this.getInvalidDatePartValue(symbol) + JS_MONTH_OFFSET).toString();
-                                var formattedMonth = padZero(Math.abs(mask.partMap[i].pattern.length - month.length)) + month;
-                                partiallyInvalidText += formattedMonth;
-                                i += Math.max(0, formattedMonth.length - 1);
+                                var formattedDatePart = padZero(partsForSegment.length - datePartText.length) + datePartText;
+                                partiallyInvalidText += formattedDatePart;
+                                // add -1 as the first character in the segment is at index i
+                                i += partsForSegment.length - 1;
                             }
                             else {
                                 partiallyInvalidText += formattedDates[symbol][i];
@@ -176,8 +178,11 @@ var DateObject = /** @class */ (function () {
                     }
                     else {
                         if (this.getInvalidDatePartValue(symbol)) {
-                            partiallyInvalidText += this.getInvalidDatePartValue(symbol);
-                            i += Math.max(0, this.getInvalidDatePartValue(symbol).toString().length - 1);
+                            var datePartText = this.getInvalidDatePartValue(symbol).toString();
+                            var formattedDatePart = padZero(partsForSegment.length - datePartText.length) + datePartText;
+                            partiallyInvalidText += formattedDatePart;
+                            // add -1 as the first character in the segment is at index i
+                            i += partsForSegment.length - 1;
                         }
                         else {
                             partiallyInvalidText += formattedDates[symbol][i];
@@ -288,16 +293,18 @@ var DateObject = /** @class */ (function () {
         }
     };
     DateObject.prototype.modifyPart = function (symbol, offset) {
+        if (!isPresent(symbol) || !isPresent(offset) || offset === 0) {
+            return;
+        }
         var newValue = cloneDate(this.value);
-        var originalValue = cloneDate(this.value);
         var timeModified = false;
         var invalidDateFound;
-        var currentInvalidDatePartValue = 0;
-        if (!this.autoCorrectParts) {
-            var isMonth = symbol === "M";
-            var isDay = symbol === "d" || symbol === "E";
+        var isMonth = symbol === "M";
+        var isDay = symbol === "d" || symbol === "E";
+        var symbolExists = this.getExisting(symbol);
+        if (!this.autoCorrectParts && (isDay || isMonth)) {
             var invalidDateParts = this._partiallyInvalidDate.invalidDateParts || {};
-            var invalidDatePart = invalidDateParts[symbol];
+            var invalidDatePartValue = this.getInvalidDatePartValue(symbol);
             var year = invalidDateParts.y.value || newValue.getFullYear();
             var month = invalidDateParts.M.value || newValue.getMonth();
             var day = invalidDateParts.d.value || invalidDateParts.E.value || newValue.getDate();
@@ -316,33 +323,61 @@ var DateObject = /** @class */ (function () {
                 case 'E':
                     day += offset;
                     break;
-                case 'h':
-                case 'H':
-                    hour += offset;
-                    break;
-                case 'm':
-                    minutes += offset;
-                    break;
-                case 's':
-                    seconds += offset;
-                    break;
-                case 'S':
-                    milliseconds += offset;
-                    break;
-                // case 'a': newValue.setHours(newValue.getHours() + (12 * offset)); timeModified = true; break;
+                // case 'h':
+                // case 'H': hour += offset; break;
+                // case 'm': minutes += offset; break;
+                // case 's': seconds += offset; break;
+                // case 'S': milliseconds += offset; break;
                 default: break;
             }
             if (symbol === "M") {
-                if ((month < 0 || month > 11) && this.getExisting(symbol)) {
-                    // do not cycle months
-                    this.setExisting(symbol, false);
-                    return;
+                if ((month < 0 || month > 11)) {
+                    if (symbolExists) {
+                        this.setExisting(symbol, false);
+                        this.resetInvalidDateSymbol(symbol);
+                        return;
+                    }
+                }
+                if (!symbolExists) {
+                    if (month < 0) {
+                        month = clamp(11 + ((month % 11) + 1), 0, 11);
+                    }
+                    else {
+                        var monthValue = isPresent(invalidDatePartValue) ?
+                            month :
+                            ((offset - JS_MONTH_OFFSET) % 12);
+                        month = clamp(monthValue, 0, 11);
+                    }
+                    month = clamp(month, 0, 11);
+                }
+                month = clamp(month, 0, 11);
+            }
+            else if (symbol === "d") {
+                if (symbolExists) {
+                    if (day <= 0 || day > 31) {
+                        this.setExisting(symbol, false);
+                        this.resetInvalidDateSymbol(symbol);
+                        return;
+                    }
+                }
+                else if (!symbolExists) {
+                    if (isPresent(invalidDatePartValue)) {
+                        if (day <= 0 || day > 31) {
+                            this.setExisting(symbol, false);
+                            this.resetInvalidDateSymbol(symbol);
+                            return;
+                        }
+                    }
+                    if (offset < 0) {
+                        var dayValue = isPresent(invalidDatePartValue) ? day : 1 + (31 - Math.abs(offset % 31));
+                        day = clamp(dayValue, 1, 31);
+                    }
+                    else {
+                        var dayValue = isPresent(invalidDatePartValue) ? day : offset % 31;
+                        day = clamp(dayValue, 1, 31);
+                    }
+                    day = clamp(day, 1, 31);
                 }
-                // const mask = this.dateFormatString(this.value, this.format);
-                // const monthPart = mask.partMap.filter(x => x.type === "month");
-                // if (monthPart && monthPart[0] && monthPart[0].pattern.length > MONTH_PART_WITH_WORDS_THRESHOLD) {
-                month = (12 + month) % 12;
-                // }
             }
             var dateCandidate = createDate(year, month, day, hour, minutes, seconds, milliseconds);
             var newValueCandidate = isMonth || isDay ?
@@ -439,92 +474,6 @@ var DateObject = /** @class */ (function () {
                     this.setExisting(symbol, false);
                 }
             }
-            else {
-                // this.modifyDateSymbol()
-                switch (symbol) {
-                    case 'y':
-                        newValue.setFullYear(newValue.getFullYear() + offset);
-                        break;
-                    case 'M':
-                        newValue = addMonths(this.value, offset);
-                        break;
-                    case 'd':
-                    case 'E':
-                        newValue.setDate(newValue.getDate() + offset);
-                        break;
-                    case 'h':
-                    case 'H':
-                        newValue.setHours(newValue.getHours() + offset);
-                        timeModified = true;
-                        break;
-                    case 'm':
-                        newValue.setMinutes(newValue.getMinutes() + offset);
-                        timeModified = true;
-                        break;
-                    case 's':
-                        newValue.setSeconds(newValue.getSeconds() + offset);
-                        timeModified = true;
-                        break;
-                    case "S":
-                        newValue.setMilliseconds(newValue.getMilliseconds() + offset);
-                        break;
-                    case 'a':
-                        newValue.setHours(newValue.getHours() + (12 * offset));
-                        timeModified = true;
-                        break;
-                    default: break;
-                }
-                invalidDateFound = true;
-                if (invalidDatePart && invalidDatePart.value) {
-                    currentInvalidDatePartValue = parseToInt(invalidDatePart.value);
-                }
-                else {
-                    if (!isPresent(invalidDatePart.value)) {
-                        newValue = cloneDate(originalValue);
-                        // this.modifyDateSymbol()
-                        switch (symbol) {
-                            case 'y':
-                                currentInvalidDatePartValue = originalValue.getFullYear();
-                                break;
-                            case 'M':
-                                currentInvalidDatePartValue = originalValue.getMonth();
-                                break;
-                            case 'd':
-                            case 'E':
-                                currentInvalidDatePartValue = originalValue.getDate();
-                                break;
-                            case 'h':
-                            case 'H':
-                                currentInvalidDatePartValue = originalValue.getHours();
-                                break;
-                            case 'm':
-                                currentInvalidDatePartValue = originalValue.getMinutes();
-                                break;
-                            case 's':
-                                currentInvalidDatePartValue = originalValue.getSeconds();
-                                break;
-                            case 'S':
-                                currentInvalidDatePartValue = originalValue.getMilliseconds();
-                                break;
-                            // case 'a': newValue.setHours(newValue.getHours() + (12 * offset)); timeModified = true; break;
-                            default: break;
-                        }
-                    }
-                    else {
-                    }
-                }
-                var invalidDatePartValue = Math.max(0, currentInvalidDatePartValue + offset);
-                if (symbol !== "y") {
-                    invalidDatePartValue = clamp(currentInvalidDatePartValue + offset, 0, 99);
-                }
-                this.setInvalidDatePart(symbol, {
-                    value: invalidDatePartValue,
-                    date: cloneDate(newValue),
-                    startDateOffset: (this.getInvalidDatePart(symbol).startDateOffset || 0) + offset,
-                    startDate: cloneDate(this.value)
-                });
-                this.setExisting(symbol, false);
-            }
         }
         else {
             switch (symbol) {
@@ -789,6 +738,7 @@ var DateObject = /** @class */ (function () {
                 // 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);
+                datePartText = middle;
             }
             var isCurrentCharParsable = !isNaN(parseInt(currentChar, 10)) || (isInCaretMode && isDeleting && currentChar === "");
             if (!parsedDate && !isNaN(middleNumber) && isCurrentCharParsable) {
@@ -826,6 +776,26 @@ var DateObject = /** @class */ (function () {
                 }
                 this._value = parsedDate;
                 this.setExisting(symbol, true);
+                if (isInCaretMode && switchToNext) {
+                    if (symbol === "M") {
+                        if (segmentLength <= MONTH_PART_WITH_WORDS_THRESHOLD) {
+                            var datePartValue = parseToInt(datePartText);
+                            if (datePartValue >= 2) {
+                                switchToNext = true;
+                            }
+                            else {
+                                switchToNext = false;
+                            }
+                        }
+                    }
+                    else {
+                        switchToNext = switchToNext ?
+                            hasFixedFormat ?
+                                datePartText.length === segmentLength :
+                                datePartText.length > segmentLength :
+                            switchToNext;
+                    }
+                }
                 return extend(parseResult, { value: this.value, switchToNext: switchToNext });
             }
         }
@@ -1037,42 +1007,80 @@ var DateObject = /** @class */ (function () {
         var resultText = '';
         var resultFormat = '';
         var format = mask.symbols;
-        var _loop_1 = function (formatSymbolIndex) {
-            if (this_1.knownParts.indexOf(format[formatSymbolIndex]) === -1 || this_1.getExisting(format[formatSymbolIndex])) {
-                resultText = text[formatSymbolIndex] + resultText;
+        var processTextSymbolsEnded = false;
+        var ignoreFormatSymbolsCount = 0;
+        var formattedDates = this.getFormattedInvalidDates(format);
+        for (var formatSymbolIndex = format.length - 1; formatSymbolIndex >= 0; formatSymbolIndex--) {
+            var partsForSegment = this.getPartsForSegment(mask, formatSymbolIndex);
+            if (this.knownParts.indexOf(format[formatSymbolIndex]) === -1 || this.getExisting(format[formatSymbolIndex])) {
+                if (this.autoCorrectParts) {
+                    resultText = text[formatSymbolIndex] + resultText;
+                }
+                else {
+                    if (text.length !== format.length) {
+                        if (processTextSymbolsEnded) {
+                            resultText = text[formatSymbolIndex] + resultText;
+                        }
+                        else if (ignoreFormatSymbolsCount > 0) {
+                            resultText = text[formatSymbolIndex] + resultText;
+                            ignoreFormatSymbolsCount--;
+                            if (ignoreFormatSymbolsCount <= 0) {
+                                processTextSymbolsEnded = true;
+                            }
+                        }
+                        else {
+                            resultText = (text[formatSymbolIndex + text.length - format.length] || "") + resultText;
+                        }
+                    }
+                    else {
+                        resultText = text[formatSymbolIndex] + resultText;
+                    }
+                }
                 resultFormat = format[formatSymbolIndex] + resultFormat;
             }
             else {
                 var symbol = format[formatSymbolIndex];
-                while (formatSymbolIndex >= 0 && symbol === format[formatSymbolIndex]) {
-                    formatSymbolIndex--;
+                var formatSymbolIndexModifier = 0;
+                if (this.autoCorrectParts || (!this.autoCorrectParts && !this.getInvalidDatePartValue(symbol))) {
+                    while (formatSymbolIndex >= 0 && symbol === format[formatSymbolIndex]) {
+                        formatSymbolIndex--;
+                    }
+                    formatSymbolIndex++;
                 }
-                formatSymbolIndex++;
-                if (this_1.leadingZero && this_1.leadingZero[symbol]) {
+                if (this.leadingZero && this.leadingZero[symbol]) {
                     resultText = '0' + resultText;
                 }
                 else {
-                    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;
+                    if (!this.autoCorrectParts && this.getInvalidDatePartValue(symbol)) {
+                        var datePartText = this.getInvalidDatePartValue(symbol).toString();
+                        if (symbol === "M") {
+                            datePartText = (parseToInt(this.getInvalidDatePartValue(symbol)) + JS_MONTH_OFFSET).toString();
+                            if (partsForSegment.length > MONTH_PART_WITH_WORDS_THRESHOLD) {
+                                resultText = formattedDates[symbol][formatSymbolIndex] + resultText;
+                            }
+                            else {
+                                datePartText = (parseToInt(this.getInvalidDatePartValue(symbol)) + JS_MONTH_OFFSET).toString();
+                                resultText = datePartText + resultText;
+                                ignoreFormatSymbolsCount = datePartText.length - partsForSegment.length;
+                            }
+                        }
+                        else {
+                            resultText = datePartText + resultText;
+                            formatSymbolIndexModifier = datePartText.length - 1;
+                            ignoreFormatSymbolsCount = datePartText.length - partsForSegment.length;
+                        }
                     }
                     else {
-                        resultText = this_1.dateFieldName(mask.partMap[formatSymbolIndex]) + resultText;
+                        resultText = this.dateFieldName(mask.partMap[formatSymbolIndex]) + resultText;
                     }
                 }
                 while (resultFormat.length < resultText.length) {
                     resultFormat = format[formatSymbolIndex] + resultFormat;
                 }
+                if (formatSymbolIndexModifier !== 0) {
+                    formatSymbolIndex = (formatSymbolIndex - formatSymbolIndexModifier) + (text.length - format.length);
+                }
             }
-            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 };
     };
@@ -1239,6 +1247,32 @@ var DateObject = /** @class */ (function () {
     DateObject.prototype.markDatePartsAsExisting = function () {
         this.modifyExisting(true);
     };
+    /**
+     * @hidden
+     */
+    DateObject.prototype.getPartsForSegment = function (mask, partIndex) {
+        var segmentPart = mask.partMap[partIndex];
+        var partsForSegment = [];
+        for (var maskPartIndex = partIndex; maskPartIndex < mask.partMap.length; maskPartIndex++) {
+            var part = mask.partMap[maskPartIndex];
+            if (segmentPart.type === part.type && segmentPart.pattern === part.pattern) {
+                partsForSegment.push(part);
+            }
+            else {
+                break;
+            }
+        }
+        for (var maskPartIndex = partIndex - 1; maskPartIndex >= 0; maskPartIndex--) {
+            var part = mask.partMap[maskPartIndex];
+            if (segmentPart.type === part.type && segmentPart.pattern === part.pattern) {
+                partsForSegment.unshift(part);
+            }
+            else {
+                break;
+            }
+        }
+        return partsForSegment;
+    };
     return DateObject;
 }());
 export { DateObject };

package/dist/es/dateinput/dateinput.js

@@ -91,7 +91,7 @@ var DateInput = /** @class */ (function (_super) {
             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';
@@ -100,6 +100,7 @@ var DateInput = /** @class */ (function (_super) {
         this.setTextAndFormat();
         this.bindEvents();
         this.resetSegmentValue = true;
+        this.interactionMode = DateInputInteractionMode.None;
         this.forceUpdate();
     };
     DateInput.prototype.destroy = function () {
@@ -155,8 +156,8 @@ var DateInput = /** @class */ (function (_super) {
         if (refresh === void 0) { refresh = false; }
         this.options = extend(this.options, options);
         if (refresh) {
-            this.destroy();
-            this.init(this.element, options);
+            this.unbindEvents();
+            this.init(this.element, this.options);
         }
     };
     /**
@@ -369,14 +370,10 @@ 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
-                        });
+                    if (hasDateValueChanged && isPresent(this.dateObject.getValue())) {
+                        if (switchPart) {
+                            this.switchDateSegment(1);
+                        }
                     }
                 }
                 else {
@@ -681,6 +678,14 @@ var DateInput = /** @class */ (function (_super) {
         if (start < 0) {
             start = 0;
         }
+        if (!this.options.autoCorrectParts && this.currentFormat.length !== this.currentText.length) {
+            if (this.currentFormat.length < this.currentText.length) {
+                end += this.currentText.length - this.currentFormat.length;
+            }
+            else {
+                end = Math.max(0, end - (this.currentFormat.length - this.currentText.length));
+            }
+        }
         return { start: start, end: end };
     };
     /**
@@ -704,24 +709,36 @@ var DateInput = /** @class */ (function (_super) {
         var selection = this.selection;
         if (this.isInCaretMode()) {
             var start = selection.start;
-            var closestNonSeparatorSymbol = this.currentFormat[start];
-            for (var i = start; i >= 0; i--) {
-                closestNonSeparatorSymbol = this.currentFormat[i];
-                if (closestNonSeparatorSymbol !== Constants.formatSeparator) {
-                    start = i;
-                    break;
+            var currentSymbol = this.currentFormat[start - (this.elementValue.length - this.currentFormat.length)];
+            var symbol = "";
+            var symbolCandidate = "";
+            if (offset < 0) {
+                for (var i = 0; i < start + offset; i++) {
+                    symbolCandidate = this.currentFormat[i];
+                    if (symbolCandidate !== Constants.formatSeparator &&
+                        symbolCandidate !== currentSymbol) {
+                        start = i;
+                        symbol = symbolCandidate;
+                        break;
+                    }
                 }
             }
-            var symbol = void 0;
-            for (var i = start; i < this.currentFormat.length; i++) {
-                symbol = this.currentFormat[i];
-                if (symbol !== Constants.formatSeparator) {
-                    break;
+            else {
+                for (var i = start + offset; i < this.currentFormat.length; i++) {
+                    symbolCandidate = this.currentFormat[i];
+                    if (symbolCandidate !== Constants.formatSeparator &&
+                        symbolCandidate !== currentSymbol) {
+                        start = i;
+                        symbol = symbolCandidate;
+                        break;
+                    }
                 }
             }
             if (symbol) {
                 this.forceUpdate();
                 this.setSelection(this.selectionBySymbol(symbol));
+                this.interactionMode = DateInputInteractionMode.Selection;
+                return;
             }
         }
         var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;