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

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;
@@ -335,6 +354,7 @@ export class DateInput extends Observable {
         const lastParseResultHasNoValue = lastParseResult && !lastParseResult.value;
         const parsingFailedOnDelete = (hasCaret && (isBackspaceKey || isDeleteKey) && lastParseResultHasNoValue);
         const resetPart = lastParseResult ? lastParseResult.resetPart : false;
+        const hasInvalidDatePart = lastParseResult ? lastParseResult.hasInvalidDatePart : false;
         const hasDateValueChanged = !isEqual(oldDateObjectValue, this.dateObject.value);
         let symbolForSelection;
         const currentSelection = this.selection;
@@ -360,14 +380,35 @@ export class DateInput extends Observable {
                 }
             }
             else if (hasCaret) {
-                if (hasDateValueChanged && isPresent(this.dateObject.getValue())) {
+                if ((hasDateValueChanged && isPresent(this.dateObject.getValue()) ||
+                    (!hasDateValueChanged && switchPart && isPresent(this.dateObject.getValue())))) {
                     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) {
-                        this.restorePreviousInputEventState();
+                        let hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
+                        if (switchPart) {
+                            this.switchDateSegment(1);
+                        }
+                        else if (e.data === "0" && hasLeadingZero) {
+                        }
+                        else {
+                            this.restorePreviousInputEventState();
+                        }
                     }
                 }
             }
@@ -379,20 +420,25 @@ export class DateInput extends Observable {
                 }
                 else {
                     // the input is not complete, not parsable or not updatable
-                    if (hasCaret && originalInteractionMode !== DateInputInteractionMode.Caret && hasDateValueChanged) {
+                    if (originalInteractionMode !== DateInputInteractionMode.Caret && hasDateValueChanged) {
                     }
-                    else if (hasCaret && originalInteractionMode !== DateInputInteractionMode.Caret) {
+                    else if (originalInteractionMode !== DateInputInteractionMode.Caret) {
                         symbolForSelection = this.currentFormat[currentSelection.start];
                         this.forceUpdate();
                         this.setSelection(this.selectionBySymbol(symbolForSelection));
                     }
-                    else {
+                    else if (!hasInvalidDatePart) {
                         this.restorePreviousInputEventState();
                     }
                 }
             }
             else {
-                this.restorePreviousInputEventState();
+                let hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
+                if (e.data === "0" && hasLeadingZero) {
+                }
+                else if (!hasInvalidDatePart) {
+                    this.restorePreviousInputEventState();
+                }
             }
         }
         else if (this.options.autoSwitchParts && (switchPart || navigationOnly)) {
@@ -454,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());
@@ -710,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];
@@ -745,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) {
@@ -933,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
      */
@@ -158,6 +162,10 @@ export declare class DateObject {
         startDateOffset?: number;
         startDate?: any;
     }): void;
+    /**
+     * @hidden
+     */
+    hasInvalidDatePart(): boolean;
     /**
      * @hidden
      */