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

package/dist/npm/common/dateobject.js

@@ -547,6 +547,14 @@ var DateObject = /** @class */ (function () {
                 literal: ""
             };
         });
+        var flatDateParts = dateParts.partMap
+            .map(function (x) {
+            return {
+                type: x.type,
+                pattern: x.pattern,
+                text: ""
+            };
+        });
         for (var i = 0; i < datePartsLiterals.length; i++) {
             var datePart = datePartsLiterals[i];
             for (var j = 0; j < datePart.pattern.length; j++) {
@@ -556,13 +564,23 @@ var DateObject = /** @class */ (function () {
             }
             i += datePart.pattern.length - 1;
         }
+        for (var i = 0; i < flatDateParts.length; i++) {
+            var datePart = flatDateParts[i];
+            for (var j = 0; j < datePart.pattern.length; j++) {
+                if (flatDateParts[i + j]) {
+                    flatDateParts[i + j].text = datePart.pattern[j];
+                }
+            }
+            i += datePart.pattern.length - 1;
+        }
         var shouldResetPart = isInCaretMode && symbol === "M" && dateParts.partMap
             .filter(function (x) { return x.type === "month"; })
             .some(function (x) { return x.pattern.length > MONTH_PART_WITH_WORDS_THRESHOLD; });
         var parseResult = {
             value: null,
             switchPart: false,
-            resetPart: shouldResetPart
+            resetPart: shouldResetPart,
+            hasInvalidDatePart: false
         };
         if (!currentChar) {
             if (isInCaretMode) {
@@ -596,13 +614,19 @@ var DateObject = /** @class */ (function () {
         var basePrefix = '';
         var baseSuffix = '';
         var suffix = '';
-        var datePartStartIndex = originalFormat.indexOf(symbol);
-        var datePartEndIndex = originalFormat.lastIndexOf(symbol);
-        var segmentLength = datePartEndIndex - datePartStartIndex + 1;
+        var convertedBaseFormat = "";
+        for (var i = 0; i < flatDateParts.length; i++) {
+            convertedBaseFormat += flatDateParts[i].text;
+        }
         var hasFixedFormat = (this.format === baseFormat) ||
+            (this.format === convertedBaseFormat) ||
             (this.format === originalFormat) ||
             (this.format.length === originalFormat.length);
+        var datePartStartIndex = (hasFixedFormat ? convertedBaseFormat : originalFormat).indexOf(symbol);
+        var datePartEndIndex = (hasFixedFormat ? convertedBaseFormat : originalFormat).lastIndexOf(symbol);
+        var segmentLength = datePartEndIndex - datePartStartIndex + 1;
         var processedSegmentCharsCount = 0;
+        var formatToTextLengthDiff = originalFormat.length - rawInputValue.length;
         if (isInCaretMode || (!isInCaretMode && !this.autoCorrectParts)) {
             for (var i = 0; i < baseDate.length; i++) {
                 if (baseFormat[i] === symbol) {
@@ -615,6 +639,11 @@ var DateObject = /** @class */ (function () {
                         }
                         processedSegmentCharsCount++;
                     }
+                    else if (formatToTextLengthDiff > 0) {
+                        if (datePartText.length + formatToTextLengthDiff < segmentLength) {
+                            datePartText += rawInputValue[i] || "";
+                        }
+                    }
                     else {
                         datePartText += rawInputValue[i] || "";
                     }
@@ -629,13 +658,13 @@ var DateObject = /** @class */ (function () {
                     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) {
                     var lengthDiff = originalFormat.length - rawInputValue.length;
-                    var trimmedDatePartText = datePartText.substring(0, datePartText.length - lengthDiff);
+                    var trimmedDatePartText = datePartText.substr(0, datePartText.length - lengthDiff);
                     if (trimmedDatePartText && trimmedDatePartText.length > 0) {
                         datePartText = trimmedDatePartText;
                     }
@@ -644,7 +673,7 @@ var DateObject = /** @class */ (function () {
                     return utils_2.extend(parseResult, { value: null, switchToNext: false });
                 }
             }
-            else {
+            if (!hasFixedFormat || (hasFixedFormat && !this.autoCorrectParts)) {
                 processedSegmentCharsCount = 0;
                 current = "";
                 datePartText = "";
@@ -662,6 +691,11 @@ var DateObject = /** @class */ (function () {
                             }
                             processedSegmentCharsCount++;
                         }
+                        else if (formatToTextLengthDiff > 0) {
+                            if (datePartText.length + formatToTextLengthDiff < segmentLength) {
+                                datePartText += rawInputValue[i] || "";
+                            }
+                        }
                         else {
                             datePartText += rawInputValue[i] || "";
                         }
@@ -671,24 +705,12 @@ var DateObject = /** @class */ (function () {
                         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) {
-                    var lengthDiff = originalFormat.length - rawInputValue.length;
-                    var trimmedDatePartText = datePartText.substring(0, datePartText.length - lengthDiff);
-                    if (trimmedDatePartText && trimmedDatePartText.length > 0) {
-                        var originalDatePartText = datePartText;
-                        datePartText = trimmedDatePartText;
-                        if (prefix + datePartText + suffix !== rawInputValue) {
-                            // move trimmed characters to the suffix
-                            suffix = originalDatePartText.substring(datePartText.length) + suffix;
-                        }
-                    }
-                }
             }
         }
         if (!isInCaretMode) {
@@ -722,8 +744,13 @@ var DateObject = /** @class */ (function () {
         var dayPeriod = this.matchDayPeriod(currentChar, symbol);
         var isZeroCurrentChar = currentChar === '0';
         var leadingZero = this.leadingZero || {};
-        if (isZeroCurrentChar && !isInCaretMode) {
-            var valueNumber = parseInt(resetSegmentValue ? currentChar : current + currentChar, 10);
+        if (isZeroCurrentChar) {
+            if (datePartText === "0") {
+                datePartText = current;
+            }
+            var valueNumber = utils_2.parseToInt(resetSegmentValue ?
+                currentChar :
+                (isInCaretMode ? datePartText : current) + currentChar);
             if (valueNumber === 0 && !this.isAbbrMonth(dateParts.partMap, symbol)) {
                 this.incrementLeadingZero(symbol);
             }
@@ -751,23 +778,15 @@ var DateObject = /** @class */ (function () {
                 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 = utils_1.unpadZero(middle);
-                    middle = utils_1.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 = utils_1.unpadZero(middle);
+                middle = utils_1.padZero(segmentLength - middle.length) + middle;
             }
             var middleNumber = parseInt(middle, 10);
             var candidateDateString = prefix + middle + suffix;
             parsedDate = this.intl.parseDate(candidateDateString, this.format, this.localeId);
-            if (isInCaretMode && !hasFixedFormat && !utils_2.isValidDate(parsedDate)) {
+            if (isInCaretMode && !utils_2.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"
@@ -777,7 +796,6 @@ var DateObject = /** @class */ (function () {
                 // as "EEEE, February..." is not parsable
                 if (this.autoCorrectParts) {
                     parsedDate = this.intl.parseDate(basePrefix + middle + baseSuffix, this.format, this.localeId);
-                    datePartText = middle;
                 }
             }
             var isCurrentCharParsable = !isNaN(parseInt(currentChar, 10)) || (isInCaretMode && isDeleting && currentChar === "");
@@ -804,13 +822,10 @@ var DateObject = /** @class */ (function () {
             if ((isInCaretMode && utils_2.isValidDate(parsedDate)) || (!isInCaretMode && parsedDate)) {
                 // move to next segment if the part will overflow with next char
                 // when start from empty date (01, then 010), padded zeros should be trimmed
-                var peekDate = this.intl.parseDate("" + prefix + this.peek(middle, patternValue) + suffix, this.format, this.localeId);
-                var patternLength = this.patternLength(patternValue) || patternValue.length;
-                var leadingZeroOffset = (this.leadingZero || {})[symbol] || 0;
-                var patternSatisfied = (leadingZeroOffset + (utils_1.unpadZero(middle) || currentChar).length) >= patternLength;
-                var switchToNext = peekDate === null ||
-                    (leadingZero[symbol] && patternValue.length <= middle.length) ||
-                    patternSatisfied;
+                var peekValue = this.peek(middle, patternValue);
+                var peekDateString = "" + prefix + peekValue + suffix;
+                var peekDate = this.intl.parseDate(peekDateString, this.format, this.localeId);
+                var switchToNext = peekDate === null || (leadingZero[symbol] && patternValue.length <= middle.length) || false;
                 if (this.shouldNormalizeCentury()) {
                     parsedDate = this.normalizeCentury(parsedDate);
                 }
@@ -838,14 +853,12 @@ var DateObject = /** @class */ (function () {
                 }
                 if (isInCaretMode && switchToNext) {
                     if (symbol === "M") {
-                        if (segmentLength <= MONTH_PART_WITH_WORDS_THRESHOLD) {
-                            var datePartValue = utils_2.parseToInt(datePartText);
-                            if (datePartValue >= 2) {
-                                switchToNext = true;
-                            }
-                            else {
-                                switchToNext = false;
-                            }
+                        var datePartValue = utils_2.parseToInt(datePartText);
+                        if (datePartValue >= 2 || datePartText.length >= 2) {
+                            switchToNext = true;
+                        }
+                        else {
+                            switchToNext = false;
                         }
                     }
                     else {
@@ -878,9 +891,6 @@ var DateObject = /** @class */ (function () {
             this.leadingZero = !this.isAbbrMonth(dateParts.partMap, symbol) ? (_b = {}, _b[symbol] = true, _b) : null;
             this.setExisting(symbol, false);
         }
-        if (isInCaretMode && datePartText.length > segmentLength) {
-            return utils_2.extend(parseResult, { value: null, switchToNext: false });
-        }
         if (!this.autoCorrectParts) {
             var datePartValue = void 0;
             var textToParse = isInCaretMode ? datePartText : middle;
@@ -891,20 +901,146 @@ var DateObject = /** @class */ (function () {
                     return utils_2.extend(parseResult, { value: null, switchToNext: false });
                 }
                 datePartValue = symbol === "M" ?
-                    utils_2.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: kendo_date_math_1.cloneDate(this.value),
-                    startDate: this._partiallyInvalidDate.startDate || kendo_date_math_1.cloneDate(this.value)
-                });
-                // }
+                var isMonth = symbol === "M";
+                var isDay = symbol === "d";
+                var newValue = kendo_date_math_1.cloneDate(this._value);
+                var invalidDateParts = this._partiallyInvalidDate.invalidDateParts || {};
+                var year = invalidDateParts.y.value || newValue.getFullYear();
+                /* tslint:disable:no-shadowed-variable */
+                var month_1 = isMonth ? datePartValue : invalidDateParts.M.value || newValue.getMonth();
+                /* tslint:enable:no-shadowed-variable */
+                var day = isDay ? datePartValue : invalidDateParts.d.value || invalidDateParts.E.value || newValue.getDate();
+                var hour = invalidDateParts.h.value || invalidDateParts.H.value || newValue.getHours();
+                var minutes = invalidDateParts.m.value || newValue.getMinutes();
+                var seconds = invalidDateParts.s.value || newValue.getSeconds();
+                var milliseconds = invalidDateParts.S.value || newValue.getMilliseconds();
+                var dateCandidate = kendo_date_math_1.createDate(year, month_1, day, hour, minutes, seconds, milliseconds);
+                var dateCandidateExists = utils_2.areDatePartsEqualTo(dateCandidate, year, month_1, day, hour, minutes, seconds, milliseconds);
+                var newValueCandidate = isMonth || isDay ?
+                    this.modifyDateSymbolWithValue(newValue, symbol, isMonth ? month_1 : day) :
+                    null;
+                var invalidDateFound = false;
+                if (isMonth && newValueCandidate) {
+                    if (newValueCandidate.getMonth() === month_1) {
+                        if (this.getExisting("d")) {
+                            if (dateCandidateExists) {
+                                newValue = kendo_date_math_1.cloneDate(dateCandidate);
+                                this.resetInvalidDateSymbol(symbol);
+                            }
+                            else {
+                                invalidDateFound = true;
+                                this.setInvalidDatePart(symbol, {
+                                    value: month_1,
+                                    date: kendo_date_math_1.cloneDate(newValueCandidate),
+                                    // startDateOffset: offset,
+                                    startDate: kendo_date_math_1.cloneDate(this.value)
+                                });
+                                this.setExisting(symbol, false);
+                            }
+                        }
+                        else if (dateCandidateExists) {
+                            this.resetInvalidDateSymbol(symbol);
+                            newValue = kendo_date_math_1.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 = kendo_date_math_1.cloneDate(newValueCandidate);
+                        }
+                    }
+                    else {
+                        invalidDateFound = true;
+                        this.setInvalidDatePart(symbol, {
+                            value: month_1,
+                            date: kendo_date_math_1.cloneDate(newValueCandidate),
+                            // startDateOffset: offset,
+                            startDate: kendo_date_math_1.cloneDate(this.value)
+                        });
+                        this.setExisting(symbol, false);
+                    }
+                }
+                else if (isDay && newValueCandidate) {
+                    if (newValueCandidate.getDate() === day) {
+                        if (this.getExisting("M")) {
+                            if (dateCandidateExists) {
+                                newValue = kendo_date_math_1.cloneDate(dateCandidate);
+                                this.resetInvalidDateSymbol(symbol);
+                            }
+                            else {
+                                invalidDateFound = true;
+                                this.setInvalidDatePart(symbol, {
+                                    value: day,
+                                    date: kendo_date_math_1.cloneDate(newValueCandidate),
+                                    // startDateOffset: offset,
+                                    startDate: kendo_date_math_1.cloneDate(this.value)
+                                });
+                                this.setExisting(symbol, false);
+                            }
+                        }
+                        else if (dateCandidateExists) {
+                            newValue = kendo_date_math_1.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 = kendo_date_math_1.cloneDate(newValueCandidate);
+                        }
+                    }
+                    else {
+                        invalidDateFound = true;
+                        this.setInvalidDatePart(symbol, {
+                            value: day,
+                            date: kendo_date_math_1.cloneDate(this.value),
+                            // startDateOffset: offset,
+                            startDate: kendo_date_math_1.cloneDate(this.value)
+                        });
+                        this.setExisting(symbol, false);
+                    }
+                }
+                if (!invalidDateFound) {
+                    this.setExisting(symbol, true);
+                    if (isInCaretMode && !utils_2.isValidDate(parsedDate)) {
+                        var valueCandidate = this.intl.parseDate(basePrefix + middle + baseSuffix, this.format, this.localeId);
+                        if (utils_2.isValidDate(valueCandidate)) {
+                            this._value = valueCandidate;
+                        }
+                    }
+                    else {
+                        this._value = newValue;
+                    }
+                    if (this.getValue()) {
+                        this.resetInvalidDate();
+                    }
+                }
+                var 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 utils_2.extend(parseResult, {
                     value: null,
-                    switchToNext: false,
-                    hasInvalidDatePart: true
+                    switchToNext: switchToNext,
+                    hasInvalidDatePart: invalidDateFound
                 });
             }
         }
@@ -927,6 +1063,12 @@ var DateObject = /** @class */ (function () {
     DateObject.prototype.setLeadingZero = function (leadingZero) {
         this.leadingZero = leadingZero;
     };
+    /**
+     * @hidden
+     */
+    DateObject.prototype.getLeadingZero = function () {
+        return this.leadingZero || {};
+    };
     /**
      * @hidden
      */
@@ -1010,7 +1152,6 @@ var DateObject = /** @class */ (function () {
         var dateFormatParts = this.intl.splitDateFormat(this.format, this.localeId);
         for (var 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);
             }
         }
@@ -1222,15 +1363,8 @@ var DateObject = /** @class */ (function () {
     };
     DateObject.prototype.setInvalidDatePart = function (symbol, _a) {
         var _b = _a.value, value = _b === void 0 ? null : _b, _c = _a.date, date = _c === void 0 ? null : _c, _d = _a.startDateOffset, startDateOffset = _d === void 0 ? 0 : _d, _e = _a.startDate, startDate = _e === void 0 ? null : _e;
-        var clampedValue = value;
-        if (symbol === "d") {
-            clampedValue = utils_2.clamp(utils_2.isPresent(value) ? value : 1, 1, 31);
-        }
-        else if (symbol === "M") {
-            clampedValue = utils_2.clamp(utils_2.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/npm/dateinput/dateinput.d.ts

@@ -9,6 +9,7 @@ export declare class DateInput extends Observable {
     private resetSegmentValue;
     private isActive;
     private interactionMode;
+    private formatStateOnKeyDown;
     private previousElementValue;
     private previousElementSelection;
     private keyDownEvent;

package/dist/npm/dateinput/dateinput.js

@@ -33,6 +33,7 @@ var CHANGE = "change";
 var defaultDateInputOptions = {
     format: "d",
     allowNulls: false,
+    hasPlaceholder: false,
     placeholder: null,
     cycleTime: true,
     locale: null,
@@ -305,6 +306,24 @@ var DateInput = /** @class */ (function (_super) {
             isInCaretMode: hasCaret,
             keyEvent: this.keyDownEvent
         });
+        var 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_1.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_1.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;
@@ -377,10 +396,30 @@ var DateInput = /** @class */ (function (_super) {
                     if (switchPart) {
                         this.switchDateSegment(1);
                     }
+                    else {
+                        if (this.options.format.length !== this.currentFormat.length &&
+                            currentFormatChar && currentFormatChar !== "y") {
+                            var elementValueLength = this.elementValue.length;
+                            this.forceUpdate();
+                            var selectionOffset = this.elementValue.length - elementValueLength;
+                            this.setSelection({
+                                start: currentSelection.start + selectionOffset,
+                                end: currentSelection.start + selectionOffset
+                            });
+                        }
+                    }
                 }
                 else {
-                    if (lastParseResultHasNoValue && !hasInvalidDatePart) {
-                        this.restorePreviousInputEventState();
+                    if (lastParseResultHasNoValue) {
+                        var hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
+                        if (switchPart) {
+                            this.switchDateSegment(1);
+                        }
+                        else if (e.data === "0" && hasLeadingZero) {
+                        }
+                        else {
+                            this.restorePreviousInputEventState();
+                        }
                     }
                 }
             }
@@ -405,7 +444,10 @@ var DateInput = /** @class */ (function (_super) {
                 }
             }
             else {
-                if (!hasInvalidDatePart) {
+                var hasLeadingZero = this.dateObject.getLeadingZero()[currentFormatChar];
+                if (e.data === "0" && hasLeadingZero) {
+                }
+                else if (!hasInvalidDatePart) {
                     this.restorePreviousInputEventState();
                 }
             }
@@ -469,9 +511,14 @@ var DateInput = /** @class */ (function (_super) {
         if (this.triggerKeyDown({ event: e })) {
             return;
         }
+        var _a = this.selection, start = _a.start, end = _a.end;
         this.keyDownEvent = e;
         this.previousElementValue = this.element.value;
-        var _a = this.selection, start = _a.start, end = _a.end;
+        this.formatStateOnKeyDown = {
+            format: this.currentFormat,
+            selectionStart: start,
+            selectionEnd: end
+        };
         this.previousElementSelection = { start: start, end: end };
         var autoSwitchKeys = (this.options.autoSwitchKeys || [])
             .map(function (x) { return x.toString().toLowerCase().trim(); });
@@ -741,11 +788,13 @@ var DateInput = /** @class */ (function (_super) {
                 return;
             }
         }
+        this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
         var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
         if (selectionStart < selectionEnd &&
             this.currentFormat[selectionStart] !== this.currentFormat[selectionEnd - 1]) {
             this.setSelection(this.selectionByIndex(offset > 0 ? selectionStart : selectionEnd - 1));
             this.resetSegmentValue = true;
+            this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
             return;
         }
         var previousFormatSymbol = this.currentFormat[selectionStart];
@@ -776,6 +825,7 @@ var DateInput = /** @class */ (function (_super) {
             this.setSelection({ start: a, end: b });
             this.resetSegmentValue = true;
         }
+        this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
     };
     DateInput.prototype.modifyDateSegmentValue = function (offset, symbol, event) {
         if (symbol === void 0) { symbol = ""; }
@@ -977,13 +1027,14 @@ var DateInput = /** @class */ (function (_super) {
         var _a = this.dateObject.getTextAndFormat(format), currentText = _a.text, currentFormat = _a.format;
         this.currentFormat = currentFormat;
         this.currentText = currentText;
+        var hasPlaceholder = this.options.hasPlaceholder || utils_2.isPresent(this.options.placeholder);
         var showPlaceholder = !this.isActive &&
-            utils_2.isPresent(this.options.placeholder) &&
+            hasPlaceholder &&
             !this.dateObject.hasValue();
-        if (utils_2.isPresent(this.options.placeholder)) {
+        if (hasPlaceholder && utils_2.isPresent(this.options.placeholder)) {
             element.placeholder = this.options.placeholder;
         }
-        var newElementValue = !showPlaceholder ? currentText : "";
+        var newElementValue = showPlaceholder ? "" : currentText;
         this.previousElementValue = this.elementValue;
         this.setElementValue(newElementValue);
         if (this.isActive && !this.options.allowCaretMode && this.options.selectNearestSegmentOnFocus) {