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

package/dist/es2015/common/dateobject.js

@@ -147,16 +147,18 @@ export class DateObject {
                     partiallyInvalidText += text[i];
                 }
                 else if (this.getInvalidDatePartValue(symbol)) {
+                    const partsForSegment = this.getPartsForSegment(mask, i);
                     if (symbol === "M") {
-                        if (mask.partMap[i].pattern.length > MONTH_PART_WITH_WORDS_THRESHOLD) {
+                        const 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)) {
-                                const month = parseToInt(this.getInvalidDatePartValue(symbol) + JS_MONTH_OFFSET).toString();
-                                const formattedMonth = padZero(Math.abs(mask.partMap[i].pattern.length - month.length)) + month;
-                                partiallyInvalidText += formattedMonth;
-                                i += Math.max(0, formattedMonth.length - 1);
+                                const 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];
@@ -165,8 +167,11 @@ export class DateObject {
                     }
                     else {
                         if (this.getInvalidDatePartValue(symbol)) {
-                            partiallyInvalidText += this.getInvalidDatePartValue(symbol);
-                            i += Math.max(0, this.getInvalidDatePartValue(symbol).toString().length - 1);
+                            const datePartText = this.getInvalidDatePartValue(symbol).toString();
+                            const 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];
@@ -275,16 +280,18 @@ export class DateObject {
         }
     }
     modifyPart(symbol, offset) {
+        if (!isPresent(symbol) || !isPresent(offset) || offset === 0) {
+            return;
+        }
         let newValue = cloneDate(this.value);
-        let originalValue = cloneDate(this.value);
         let timeModified = false;
         let invalidDateFound;
-        let currentInvalidDatePartValue = 0;
-        if (!this.autoCorrectParts) {
-            const isMonth = symbol === "M";
-            const isDay = symbol === "d" || symbol === "E";
+        const isMonth = symbol === "M";
+        const isDay = symbol === "d" || symbol === "E";
+        const symbolExists = this.getExisting(symbol);
+        if (!this.autoCorrectParts && (isDay || isMonth)) {
             const invalidDateParts = this._partiallyInvalidDate.invalidDateParts || {};
-            const invalidDatePart = invalidDateParts[symbol];
+            const invalidDatePartValue = this.getInvalidDatePartValue(symbol);
             let year = invalidDateParts.y.value || newValue.getFullYear();
             let month = invalidDateParts.M.value || newValue.getMonth();
             let day = invalidDateParts.d.value || invalidDateParts.E.value || newValue.getDate();
@@ -303,33 +310,61 @@ export class DateObject {
                 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 {
+                        const 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) {
+                        const dayValue = isPresent(invalidDatePartValue) ? day : 1 + (31 - Math.abs(offset % 31));
+                        day = clamp(dayValue, 1, 31);
+                    }
+                    else {
+                        const 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;
-                // }
             }
             const dateCandidate = createDate(year, month, day, hour, minutes, seconds, milliseconds);
             const newValueCandidate = isMonth || isDay ?
@@ -426,92 +461,6 @@ export class DateObject {
                     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 {
-                    }
-                }
-                let 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) {
@@ -667,6 +616,13 @@ export class DateObject {
                 if (originalFormat.length < rawInputValue.length) {
                     datePartText += currentChar;
                 }
+                else if (!isDeleting && originalFormat.length > rawInputValue.length) {
+                    const lengthDiff = originalFormat.length - rawInputValue.length;
+                    const trimmedDatePartText = datePartText.substring(0, datePartText.length - lengthDiff);
+                    if (trimmedDatePartText && trimmedDatePartText.length > 0) {
+                        datePartText = trimmedDatePartText;
+                    }
+                }
                 if (datePartText.length > segmentLength) {
                     return extend(parseResult, { value: null, switchToNext: false });
                 }
@@ -704,6 +660,13 @@ export class DateObject {
                 if (originalFormat.length < rawInputValue.length) {
                     datePartText += currentChar;
                 }
+                else if (!isDeleting && originalFormat.length > rawInputValue.length) {
+                    const lengthDiff = originalFormat.length - rawInputValue.length;
+                    const trimmedDatePartText = datePartText.substring(0, datePartText.length - lengthDiff);
+                    if (trimmedDatePartText && trimmedDatePartText.length > 0) {
+                        datePartText = trimmedDatePartText;
+                    }
+                }
             }
         }
         else {
@@ -749,14 +712,19 @@ export class DateObject {
             if (!tryParse) {
                 break;
             }
-            if (!this.autoCorrectParts) {
-                tryParse = false;
-            }
             let middle = resetSegmentValue ?
                 currentChar :
                 isInCaretMode ?
                     datePartText :
                     (current.substring(i) + currentChar);
+            if (!this.autoCorrectParts) {
+                tryParse = false;
+                if (!isInCaretMode) {
+                    // try to make an exact match as there will be only 1 attempt
+                    middle = unpadZero(middle);
+                    middle = padZero(segmentLength - middle.length) + middle;
+                }
+            }
             if (isInCaretMode) {
                 // try to make an exact match as there will be only 1 attempt
                 tryParse = false;
@@ -774,6 +742,7 @@ export class DateObject {
                 // 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;
             }
             const isCurrentCharParsable = !isNaN(parseInt(currentChar, 10)) || (isInCaretMode && isDeleting && currentChar === "");
             if (!parsedDate && !isNaN(middleNumber) && isCurrentCharParsable) {
@@ -803,7 +772,7 @@ export class DateObject {
                 const patternLength = this.patternLength(patternValue) || patternValue.length;
                 const leadingZeroOffset = (this.leadingZero || {})[symbol] || 0;
                 const patternSatisfied = (leadingZeroOffset + (unpadZero(middle) || currentChar).length) >= patternLength;
-                const switchToNext = peekDate === null ||
+                let switchToNext = peekDate === null ||
                     (leadingZero[symbol] && patternValue.length <= middle.length) ||
                     patternSatisfied;
                 if (this.shouldNormalizeCentury()) {
@@ -811,6 +780,26 @@ export class DateObject {
                 }
                 this._value = parsedDate;
                 this.setExisting(symbol, true);
+                if (isInCaretMode && switchToNext) {
+                    if (symbol === "M") {
+                        if (segmentLength <= MONTH_PART_WITH_WORDS_THRESHOLD) {
+                            const 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 });
             }
         }
@@ -838,9 +827,6 @@ export class DateObject {
         }
         if (!this.autoCorrectParts) {
             this.setExisting(symbol, false);
-            // todo check if string is better
-            // const padPrefix = padZero(Math.abs(current.length - datePartText.length));
-            // const paddedDatePartText = padPrefix + datePartText;
             let datePartValue;
             const textToParse = isInCaretMode ? datePartText : current;
             const parsedValue = parseToInt(textToParse);
@@ -1020,27 +1006,68 @@ export class DateObject {
         let resultText = '';
         let resultFormat = '';
         let format = mask.symbols;
+        let processTextSymbolsEnded = false;
+        let ignoreFormatSymbolsCount = 0;
+        const formattedDates = this.getFormattedInvalidDates(format);
         for (let formatSymbolIndex = format.length - 1; formatSymbolIndex >= 0; formatSymbolIndex--) {
+            const partsForSegment = this.getPartsForSegment(mask, formatSymbolIndex);
             if (this.knownParts.indexOf(format[formatSymbolIndex]) === -1 || this.getExisting(format[formatSymbolIndex])) {
-                resultText = text[formatSymbolIndex] + resultText;
+                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 {
                 const symbol = format[formatSymbolIndex];
-                while (formatSymbolIndex >= 0 && symbol === format[formatSymbolIndex]) {
-                    formatSymbolIndex--;
+                let formatSymbolIndexModifier = 0;
+                if (this.autoCorrectParts || (!this.autoCorrectParts && !this.getInvalidDatePartValue(symbol))) {
+                    while (formatSymbolIndex >= 0 && symbol === format[formatSymbolIndex]) {
+                        formatSymbolIndex--;
+                    }
+                    formatSymbolIndex++;
                 }
-                formatSymbolIndex++;
                 if (this.leadingZero && this.leadingZero[symbol]) {
                     resultText = '0' + resultText;
                 }
                 else {
                     if (!this.autoCorrectParts && this.getInvalidDatePartValue(symbol)) {
-                        // use mask.symbols instead of mask.partMap
-                        const part = mask.partMap[formatSymbolIndex];
-                        const pattern = mask.partMap.filter(x => x.type === part.type && x.pattern === part.pattern);
-                        const segmentText = text.substr(formatSymbolIndex, pattern.length);
-                        resultText = segmentText + resultText;
+                        let 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.dateFieldName(mask.partMap[formatSymbolIndex]) + resultText;
@@ -1049,6 +1076,9 @@ export class DateObject {
                 while (resultFormat.length < resultText.length) {
                     resultFormat = format[formatSymbolIndex] + resultFormat;
                 }
+                if (formatSymbolIndexModifier !== 0) {
+                    formatSymbolIndex = (formatSymbolIndex - formatSymbolIndexModifier) + (text.length - format.length);
+                }
             }
         }
         return { text: resultText, format: resultFormat };
@@ -1213,4 +1243,30 @@ export class DateObject {
     markDatePartsAsExisting() {
         this.modifyExisting(true);
     }
+    /**
+     * @hidden
+     */
+    getPartsForSegment(mask, partIndex) {
+        const segmentPart = mask.partMap[partIndex];
+        const partsForSegment = [];
+        for (let maskPartIndex = partIndex; maskPartIndex < mask.partMap.length; maskPartIndex++) {
+            const part = mask.partMap[maskPartIndex];
+            if (segmentPart.type === part.type && segmentPart.pattern === part.pattern) {
+                partsForSegment.push(part);
+            }
+            else {
+                break;
+            }
+        }
+        for (let maskPartIndex = partIndex - 1; maskPartIndex >= 0; maskPartIndex--) {
+            const part = mask.partMap[maskPartIndex];
+            if (segmentPart.type === part.type && segmentPart.pattern === part.pattern) {
+                partsForSegment.unshift(part);
+            }
+            else {
+                break;
+            }
+        }
+        return partsForSegment;
+    }
 }

package/dist/es2015/dateinput/dateinput.js

@@ -83,7 +83,7 @@ export class DateInput extends Observable {
             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';
@@ -92,6 +92,7 @@ export class DateInput extends Observable {
         this.setTextAndFormat();
         this.bindEvents();
         this.resetSegmentValue = true;
+        this.interactionMode = DateInputInteractionMode.None;
         this.forceUpdate();
     }
     destroy() {
@@ -146,8 +147,8 @@ export class DateInput extends Observable {
     setOptions(options, 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);
         }
     }
     /**
@@ -359,24 +360,13 @@ export class DateInput extends Observable {
                 }
             }
             else if (hasCaret) {
-                if (this.options.format.length !== this.currentFormat.length) {
-                    if (hasDateValueChanged && isPresent(this.dateObject.value)) {
-                        const elementValueLength = this.elementValue.length;
-                        this.forceUpdate();
-                        const 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 {
-                    if (hasDateValueChanged) {
-                        if (lastParseResultHasNoValue) {
-                            this.restorePreviousInputEventState();
-                        }
-                    }
-                    else {
+                    if (lastParseResultHasNoValue) {
                         this.restorePreviousInputEventState();
                     }
                 }
@@ -656,6 +646,14 @@ export class DateInput extends Observable {
         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, end };
     }
     /**
@@ -679,24 +677,37 @@ export class DateInput extends Observable {
         const selection = this.selection;
         if (this.isInCaretMode()) {
             let start = selection.start;
-            let closestNonSeparatorSymbol = this.currentFormat[start];
-            for (let i = start; i >= 0; i--) {
-                closestNonSeparatorSymbol = this.currentFormat[i];
-                if (closestNonSeparatorSymbol !== Constants.formatSeparator) {
-                    start = i;
-                    break;
+            const currentSymbol = this.currentFormat[start - (this.elementValue.length - this.currentFormat.length)] ||
+                this.currentFormat[start];
+            let symbol = "";
+            let symbolCandidate = "";
+            if (offset < 0) {
+                for (let i = start + offset; i >= 0; i--) {
+                    symbolCandidate = this.currentFormat[i];
+                    if (symbolCandidate !== Constants.formatSeparator &&
+                        symbolCandidate !== currentSymbol) {
+                        start = i;
+                        symbol = symbolCandidate;
+                        break;
+                    }
                 }
             }
-            let symbol;
-            for (let i = start; i < this.currentFormat.length; i++) {
-                symbol = this.currentFormat[i];
-                if (symbol !== Constants.formatSeparator) {
-                    break;
+            else {
+                for (let 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;
             }
         }
         let { start: selectionStart, end: selectionEnd } = this.selection;

package/dist/npm/common/dateobject.d.ts

@@ -170,4 +170,8 @@ export declare class DateObject {
      */
     modifyDateSymbolWithValue(date: any, symbol: any, value: any): Date;
     markDatePartsAsExisting(): void;
+    /**
+     * @hidden
+     */
+    getPartsForSegment(mask: any, partIndex: any): any[];
 }