@progress/kendo-dateinputs-common 0.2.0-dev.202301161405 → 0.2.0-dev.202301171717

package/dist/es2015/common/dateobject.js

@@ -530,6 +530,14 @@ export class DateObject {
                 literal: ""
             };
         });
+        const flatDateParts = dateParts.partMap
+            .map((x) => {
+            return {
+                type: x.type,
+                pattern: x.pattern,
+                text: ""
+            };
+        });
         for (let i = 0; i < datePartsLiterals.length; i++) {
             const datePart = datePartsLiterals[i];
             for (let j = 0; j < datePart.pattern.length; j++) {
@@ -539,13 +547,23 @@ export class DateObject {
             }
             i += datePart.pattern.length - 1;
         }
+        for (let i = 0; i < flatDateParts.length; i++) {
+            const datePart = flatDateParts[i];
+            for (let j = 0; j < datePart.pattern.length; j++) {
+                if (flatDateParts[i + j]) {
+                    flatDateParts[i + j].text = datePart.pattern[j];
+                }
+            }
+            i += datePart.pattern.length - 1;
+        }
         let shouldResetPart = isInCaretMode && symbol === "M" && dateParts.partMap
             .filter(x => x.type === "month")
             .some(x => x.pattern.length > MONTH_PART_WITH_WORDS_THRESHOLD);
         let parseResult = {
             value: null,
             switchPart: false,
-            resetPart: shouldResetPart
+            resetPart: shouldResetPart,
+            hasInvalidDatePart: false
         };
         if (!currentChar) {
             if (isInCaretMode) {
@@ -579,13 +597,19 @@ export class DateObject {
         let basePrefix = '';
         let baseSuffix = '';
         let suffix = '';
-        const datePartStartIndex = originalFormat.indexOf(symbol);
-        const datePartEndIndex = originalFormat.lastIndexOf(symbol);
-        const segmentLength = datePartEndIndex - datePartStartIndex + 1;
+        let convertedBaseFormat = "";
+        for (let i = 0; i < flatDateParts.length; i++) {
+            convertedBaseFormat += flatDateParts[i].text;
+        }
         const hasFixedFormat = (this.format === baseFormat) ||
+            (this.format === convertedBaseFormat) ||
             (this.format === originalFormat) ||
             (this.format.length === originalFormat.length);
+        const datePartStartIndex = (hasFixedFormat ? convertedBaseFormat : originalFormat).indexOf(symbol);
+        const datePartEndIndex = (hasFixedFormat ? convertedBaseFormat : originalFormat).lastIndexOf(symbol);
+        const segmentLength = datePartEndIndex - datePartStartIndex + 1;
         let processedSegmentCharsCount = 0;
+        let formatToTextLengthDiff = originalFormat.length - rawInputValue.length;
         if (isInCaretMode || (!isInCaretMode && !this.autoCorrectParts)) {
             for (let i = 0; i < baseDate.length; i++) {
                 if (baseFormat[i] === symbol) {
@@ -598,6 +622,11 @@ export class DateObject {
                         }
                         processedSegmentCharsCount++;
                     }
+                    else if (formatToTextLengthDiff > 0) {
+                        if (datePartText.length + formatToTextLengthDiff < segmentLength) {
+                            datePartText += rawInputValue[i] || "";
+                        }
+                    }
                     else {
                         datePartText += rawInputValue[i] || "";
                     }
@@ -612,13 +641,13 @@ export class DateObject {
                     baseSuffix += baseDate[i];
                 }
             }
-            if (hasFixedFormat && this.autoCorrectParts) {
-                if (originalFormat.length < rawInputValue.length) {
+            if (hasFixedFormat) {
+                if (convertedBaseFormat.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);
+                    const trimmedDatePartText = datePartText.substr(0, datePartText.length - lengthDiff);
                     if (trimmedDatePartText && trimmedDatePartText.length > 0) {
                         datePartText = trimmedDatePartText;
                     }
@@ -627,7 +656,7 @@ export class DateObject {
                     return extend(parseResult, { value: null, switchToNext: false });
                 }
             }
-            else {
+            if (!hasFixedFormat || (hasFixedFormat && !this.autoCorrectParts)) {
                 processedSegmentCharsCount = 0;
                 current = "";
                 datePartText = "";
@@ -645,6 +674,11 @@ export class DateObject {
                             }
                             processedSegmentCharsCount++;
                         }
+                        else if (formatToTextLengthDiff > 0) {
+                            if (datePartText.length + formatToTextLengthDiff < segmentLength) {
+                                datePartText += rawInputValue[i] || "";
+                            }
+                        }
                         else {
                             datePartText += rawInputValue[i] || "";
                         }
@@ -654,24 +688,12 @@ export class DateObject {
                         prefix += rawInputValue[i] || "";
                     }
                     else {
-                        suffix += rawInputValue[i] || "";
+                        suffix += rawInputValue[i - formatToTextLengthDiff] || "";
                     }
                 }
                 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) {
-                        const originalDatePartText = datePartText;
-                        datePartText = trimmedDatePartText;
-                        if (prefix + datePartText + suffix !== rawInputValue) {
-                            // move trimmed characters to the suffix
-                            suffix = originalDatePartText.substring(datePartText.length) + suffix;
-                        }
-                    }
-                }
             }
         }
         if (!isInCaretMode) {
@@ -701,12 +723,17 @@ export class DateObject {
             }
         }
         let parsedDate = null;
-        const month = this.matchMonth(currentChar);
+        let month = this.matchMonth(currentChar);
         const dayPeriod = this.matchDayPeriod(currentChar, symbol);
         const isZeroCurrentChar = currentChar === '0';
         const leadingZero = this.leadingZero || {};
-        if (isZeroCurrentChar && !isInCaretMode) {
-            let valueNumber = parseInt(resetSegmentValue ? currentChar : current + currentChar, 10);
+        if (isZeroCurrentChar) {
+            if (datePartText === "0") {
+                datePartText = current;
+            }
+            let valueNumber = parseToInt(resetSegmentValue ?
+                currentChar :
+                (isInCaretMode ? datePartText : current) + currentChar);
             if (valueNumber === 0 && !this.isAbbrMonth(dateParts.partMap, symbol)) {
                 this.incrementLeadingZero(symbol);
             }
@@ -734,23 +761,15 @@ export class DateObject {
                 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
+            if (isInCaretMode || !this.autoCorrectParts) {
                 tryParse = false;
                 middle = unpadZero(middle);
+                middle = padZero(segmentLength - middle.length) + middle;
             }
             let middleNumber = parseInt(middle, 10);
             const candidateDateString = prefix + middle + suffix;
             parsedDate = this.intl.parseDate(candidateDateString, this.format, this.localeId);
-            if (isInCaretMode && !hasFixedFormat && !isValidDate(parsedDate)) {
+            if (isInCaretMode && !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"
@@ -760,7 +779,6 @@ export class DateObject {
                 // as "EEEE, February..." is not parsable
                 if (this.autoCorrectParts) {
                     parsedDate = this.intl.parseDate(basePrefix + middle + baseSuffix, this.format, this.localeId);
-                    datePartText = middle;
                 }
             }
             const isCurrentCharParsable = !isNaN(parseInt(currentChar, 10)) || (isInCaretMode && isDeleting && currentChar === "");
@@ -821,14 +839,12 @@ export class DateObject {
                 }
                 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;
-                            }
+                        const datePartValue = parseToInt(datePartText);
+                        if (datePartValue >= 2 || datePartText.length >= 2) {
+                            switchToNext = true;
+                        }
+                        else {
+                            switchToNext = false;
                         }
                     }
                     else {
@@ -861,9 +877,6 @@ export class DateObject {
             this.leadingZero = !this.isAbbrMonth(dateParts.partMap, symbol) ? { [symbol]: true } : null;
             this.setExisting(symbol, false);
         }
-        if (isInCaretMode && datePartText.length > segmentLength) {
-            return extend(parseResult, { value: null, switchToNext: false });
-        }
         if (!this.autoCorrectParts) {
             let datePartValue;
             const textToParse = isInCaretMode ? datePartText : middle;
@@ -874,20 +887,146 @@ export class DateObject {
                     return extend(parseResult, { value: null, switchToNext: false });
                 }
                 datePartValue = symbol === "M" ?
-                    clamp(parsedValue - JS_MONTH_OFFSET, 0, 12 - JS_MONTH_OFFSET) :
+                    parsedValue - JS_MONTH_OFFSET :
                     parsedValue;
-                // if (!isEqual(newDate, this.value)) {
-                this.setExisting(symbol, false);
-                this.setInvalidDatePart(symbol, {
-                    value: datePartValue,
-                    date: cloneDate(this.value),
-                    startDate: this._partiallyInvalidDate.startDate || cloneDate(this.value)
-                });
-                // }
+                const isMonth = symbol === "M";
+                const isDay = symbol === "d";
+                let newValue = cloneDate(this._value);
+                const invalidDateParts = this._partiallyInvalidDate.invalidDateParts || {};
+                let year = invalidDateParts.y.value || newValue.getFullYear();
+                /* tslint:disable:no-shadowed-variable */
+                let month = isMonth ? datePartValue : invalidDateParts.M.value || newValue.getMonth();
+                /* tslint:enable:no-shadowed-variable */
+                let day = isDay ? datePartValue : invalidDateParts.d.value || invalidDateParts.E.value || newValue.getDate();
+                let hour = invalidDateParts.h.value || invalidDateParts.H.value || newValue.getHours();
+                let minutes = invalidDateParts.m.value || newValue.getMinutes();
+                let seconds = invalidDateParts.s.value || newValue.getSeconds();
+                let milliseconds = invalidDateParts.S.value || newValue.getMilliseconds();
+                const dateCandidate = createDate(year, month, day, hour, minutes, seconds, milliseconds);
+                const dateCandidateExists = areDatePartsEqualTo(dateCandidate, year, month, day, hour, minutes, seconds, milliseconds);
+                const newValueCandidate = isMonth || isDay ?
+                    this.modifyDateSymbolWithValue(newValue, symbol, isMonth ? month : day) :
+                    null;
+                let invalidDateFound = false;
+                if (isMonth && newValueCandidate) {
+                    if (newValueCandidate.getMonth() === month) {
+                        if (this.getExisting("d")) {
+                            if (dateCandidateExists) {
+                                newValue = cloneDate(dateCandidate);
+                                this.resetInvalidDateSymbol(symbol);
+                            }
+                            else {
+                                invalidDateFound = true;
+                                this.setInvalidDatePart(symbol, {
+                                    value: month,
+                                    date: cloneDate(newValueCandidate),
+                                    // startDateOffset: offset,
+                                    startDate: cloneDate(this.value)
+                                });
+                                this.setExisting(symbol, false);
+                            }
+                        }
+                        else if (dateCandidateExists) {
+                            this.resetInvalidDateSymbol(symbol);
+                            newValue = cloneDate(dateCandidate);
+                            if (this.getExisting("M") && this.getExisting("y")) {
+                                // changing from 28/Feb to 29/Feb to 29/March
+                                this.setExisting("d", true);
+                                this.resetInvalidDateSymbol("d");
+                            }
+                        }
+                        else {
+                            this.resetInvalidDateSymbol(symbol);
+                            newValue = cloneDate(newValueCandidate);
+                        }
+                    }
+                    else {
+                        invalidDateFound = true;
+                        this.setInvalidDatePart(symbol, {
+                            value: month,
+                            date: cloneDate(newValueCandidate),
+                            // startDateOffset: offset,
+                            startDate: cloneDate(this.value)
+                        });
+                        this.setExisting(symbol, false);
+                    }
+                }
+                else if (isDay && newValueCandidate) {
+                    if (newValueCandidate.getDate() === day) {
+                        if (this.getExisting("M")) {
+                            if (dateCandidateExists) {
+                                newValue = cloneDate(dateCandidate);
+                                this.resetInvalidDateSymbol(symbol);
+                            }
+                            else {
+                                invalidDateFound = true;
+                                this.setInvalidDatePart(symbol, {
+                                    value: day,
+                                    date: cloneDate(newValueCandidate),
+                                    // startDateOffset: offset,
+                                    startDate: cloneDate(this.value)
+                                });
+                                this.setExisting(symbol, false);
+                            }
+                        }
+                        else if (dateCandidateExists) {
+                            newValue = cloneDate(dateCandidate);
+                            this.resetInvalidDateSymbol(symbol);
+                            if (this.getExisting("d") && this.getExisting("y")) {
+                                // changing from 31/Jan to 31/Feb to 28/Feb
+                                this.setExisting("M", true);
+                                this.resetInvalidDateSymbol("M");
+                            }
+                        }
+                        else {
+                            this.resetInvalidDateSymbol(symbol);
+                            newValue = cloneDate(newValueCandidate);
+                        }
+                    }
+                    else {
+                        invalidDateFound = true;
+                        this.setInvalidDatePart(symbol, {
+                            value: day,
+                            date: cloneDate(this.value),
+                            // startDateOffset: offset,
+                            startDate: cloneDate(this.value)
+                        });
+                        this.setExisting(symbol, false);
+                    }
+                }
+                if (!invalidDateFound) {
+                    this.setExisting(symbol, true);
+                    if (isInCaretMode && !isValidDate(parsedDate)) {
+                        const valueCandidate = this.intl.parseDate(basePrefix + middle + baseSuffix, this.format, this.localeId);
+                        if (isValidDate(valueCandidate)) {
+                            this._value = valueCandidate;
+                        }
+                    }
+                    else {
+                        this._value = newValue;
+                    }
+                    if (this.getValue()) {
+                        this.resetInvalidDate();
+                    }
+                }
+                let switchToNext = false;
+                if (symbol === "M") {
+                    if (parsedValue >= 2 || textToParse.length >= 2) {
+                        switchToNext = true;
+                    }
+                    else {
+                        switchToNext = false;
+                    }
+                }
+                else {
+                    switchToNext = hasFixedFormat ?
+                        textToParse.length === segmentLength :
+                        textToParse.length > segmentLength;
+                }
                 return extend(parseResult, {
                     value: null,
-                    switchToNext: false,
-                    hasInvalidDatePart: true
+                    switchToNext: switchToNext,
+                    hasInvalidDatePart: invalidDateFound
                 });
             }
         }
@@ -910,6 +1049,12 @@ export class DateObject {
     setLeadingZero(leadingZero) {
         this.leadingZero = leadingZero;
     }
+    /**
+     * @hidden
+     */
+    getLeadingZero() {
+        return this.leadingZero || {};
+    }
     /**
      * @hidden
      */
@@ -992,7 +1137,6 @@ export class DateObject {
         const dateFormatParts = this.intl.splitDateFormat(this.format, this.localeId);
         for (let i = 0; i < dateFormatParts.length; i++) {
             if (dateFormatParts[i].type === 'month' && dateFormatParts[i].names) {
-                // return this.intl.dateFormatNames(dateFormatParts[i].names);
                 return this.intl.dateFormatNames(locale, dateFormatParts[i].names);
             }
         }
@@ -1200,15 +1344,8 @@ export class DateObject {
         return (invalidDatePart || {}).value;
     }
     setInvalidDatePart(symbol, { value = null, date = null, startDateOffset = 0, startDate = null }) {
-        let clampedValue = value;
-        if (symbol === "d") {
-            clampedValue = clamp(isPresent(value) ? value : 1, 1, 31);
-        }
-        else if (symbol === "M") {
-            clampedValue = clamp(isPresent(value) ? value : 0, 0, 11);
-        }
         if (this._partiallyInvalidDate.invalidDateParts[symbol]) {
-            this._partiallyInvalidDate.invalidDateParts[symbol].value = clampedValue;
+            this._partiallyInvalidDate.invalidDateParts[symbol].value = value;
             this._partiallyInvalidDate.invalidDateParts[symbol].date = date;
             this._partiallyInvalidDate.invalidDateParts[symbol].startDateOffset = startDateOffset;
             this._partiallyInvalidDate.startDate = startDate;

package/dist/es2015/dateinput/dateinput.js

@@ -29,6 +29,7 @@ const CHANGE = "change";
 const defaultDateInputOptions = {
     format: "d",
     allowNulls: false,
+    hasPlaceholder: false,
     placeholder: null,
     cycleTime: true,
     locale: null,
@@ -286,7 +287,7 @@ export class DateInput extends Observable {
             text = currentText;
         }
         const newText = this.elementValue;
-        const diff = approximateStringMatching({
+        let diff = approximateStringMatching({
             oldText: text,
             newText: newText,
             formatPattern: this.currentFormat,
@@ -294,6 +295,24 @@ export class DateInput extends Observable {
             isInCaretMode: hasCaret,
             keyEvent: this.keyDownEvent
         });
+        const currentFormatChar = this.formatStateOnKeyDown.format[this.formatStateOnKeyDown.selectionStart] || "";
+        if (this.options.allowCaretMode && hasCaret && this.currentFormat.length !== this.elementValue.length) {
+            if (currentFormatChar &&
+                currentFormatChar.length > 0 &&
+                currentFormatChar !== Constants.formatSeparator) {
+                if (!diff || diff.length === 0) {
+                    diff = [];
+                    diff[0][0] = currentFormatChar;
+                    diff[0][1] = e.data || "";
+                }
+                else if (diff[0] && diff[0][0] !== Constants.formatSeparator) {
+                    if (diff[0][0] !== currentFormatChar) {
+                        diff[0][0] = currentFormatChar;
+                        diff[0][1] = e.data || "";
+                    }
+                }
+            }
+        }
         if (hasCaret && (!diff || diff.length === 0)) {
             this.restorePreviousInputEventState();
             return;
@@ -366,10 +385,30 @@ export class DateInput extends Observable {
                     if (switchPart) {
                         this.switchDateSegment(1);
                     }
+                    else {
+                        if (this.options.format.length !== this.currentFormat.length &&
+                            currentFormatChar && currentFormatChar !== "y") {
+                            const elementValueLength = this.elementValue.length;
+                            this.forceUpdate();
+                            const selectionOffset = this.elementValue.length - elementValueLength;
+                            this.setSelection({
+                                start: currentSelection.start + selectionOffset,
+                                end: currentSelection.start + selectionOffset
+                            });
+                        }
+                    }
                 }
                 else {
-                    if (lastParseResultHasNoValue && !hasInvalidDatePart) {
-                        this.restorePreviousInputEventState();
+                    if (lastParseResultHasNoValue) {
+                        let hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
+                        if (switchPart) {
+                            this.switchDateSegment(1);
+                        }
+                        else if (e.data === "0" && hasLeadingZero) {
+                        }
+                        else {
+                            this.restorePreviousInputEventState();
+                        }
                     }
                 }
             }
@@ -394,7 +433,10 @@ export class DateInput extends Observable {
                 }
             }
             else {
-                if (!hasInvalidDatePart) {
+                let hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
+                if (e.data === "0" && hasLeadingZero) {
+                }
+                else if (!hasInvalidDatePart) {
                     this.restorePreviousInputEventState();
                 }
             }
@@ -458,9 +500,14 @@ export class DateInput extends Observable {
         if (this.triggerKeyDown({ event: e })) {
             return;
         }
+        const { start, end } = this.selection;
         this.keyDownEvent = e;
         this.previousElementValue = this.element.value;
-        const { start, end } = this.selection;
+        this.formatStateOnKeyDown = {
+            format: this.currentFormat,
+            selectionStart: start,
+            selectionEnd: end
+        };
         this.previousElementSelection = { start, end };
         const autoSwitchKeys = (this.options.autoSwitchKeys || [])
             .map(x => x.toString().toLowerCase().trim());
@@ -714,11 +761,13 @@ export class DateInput extends Observable {
                 return;
             }
         }
+        this.interactionMode = DateInputInteractionMode.None;
         let { start: selectionStart, end: selectionEnd } = this.selection;
         if (selectionStart < selectionEnd &&
             this.currentFormat[selectionStart] !== this.currentFormat[selectionEnd - 1]) {
             this.setSelection(this.selectionByIndex(offset > 0 ? selectionStart : selectionEnd - 1));
             this.resetSegmentValue = true;
+            this.interactionMode = DateInputInteractionMode.None;
             return;
         }
         const previousFormatSymbol = this.currentFormat[selectionStart];
@@ -749,6 +798,7 @@ export class DateInput extends Observable {
             this.setSelection({ start: a, end: b });
             this.resetSegmentValue = true;
         }
+        this.interactionMode = DateInputInteractionMode.None;
     }
     modifyDateSegmentValue(offset, symbol = "", event = {}) {
         if (!this.dateObject) {
@@ -937,13 +987,14 @@ export class DateInput extends Observable {
         const { text: currentText, format: currentFormat } = this.dateObject.getTextAndFormat(format);
         this.currentFormat = currentFormat;
         this.currentText = currentText;
+        const hasPlaceholder = this.options.hasPlaceholder || isPresent(this.options.placeholder);
         const showPlaceholder = !this.isActive &&
-            isPresent(this.options.placeholder) &&
+            hasPlaceholder &&
             !this.dateObject.hasValue();
-        if (isPresent(this.options.placeholder)) {
+        if (hasPlaceholder && isPresent(this.options.placeholder)) {
             element.placeholder = this.options.placeholder;
         }
-        const newElementValue = !showPlaceholder ? currentText : "";
+        const newElementValue = showPlaceholder ? "" : currentText;
         this.previousElementValue = this.elementValue;
         this.setElementValue(newElementValue);
         if (this.isActive && !this.options.allowCaretMode && this.options.selectNearestSegmentOnFocus) {

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

@@ -81,6 +81,10 @@ export declare class DateObject {
      */
     resetLeadingZero(): boolean;
     setLeadingZero(leadingZero: any): void;
+    /**
+     * @hidden
+     */
+    getLeadingZero(): any;
     /**
      * @hidden
      */