Date Input Mask -The min mask setting results in unexpected input beh…

…avior (#8054)

* resolve #8050 Date Input Mask -The min mask setting results in unexpected input behavior

* work for #8050

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

src/mask/mask_datetime.ts

@@ -248,9 +248,30 @@ export class InputMaskDateTime extends InputMaskPattern {
     } else if (propertyName === "year" && !this.isYearValid(dateTime)) {
       data = data.slice(0, data.length - 1);
     } else if((propertyName === "day" && parseInt(data[0]) > 3) || (propertyName === "month" && parseInt(data[0]) > 1)) {
+      if(this.isDateValid(dateTime)) {
+        newItem.isCompleted = true;
+      } else {
+        data = data.slice(0, data.length - 1);
+      }
+    } else if((propertyName === "day" && parseInt(data[0]) <= 3 && parseInt(data[0]) !== 0) || (propertyName === "month" && parseInt(data[0]) <= 1 && parseInt(data[0]) !== 0)) {
+      const prevValue = (dateTime as any)[propertyName];
+      let tempValue = prevValue * 10;
+      const maxValue = propertyName === "month" ? 3 : 10;
       newItem.isCompleted = true;
+
+      for(let index = 0; index < maxValue; index++) {
+        (dateTime as any)[propertyName] = tempValue + index;
+        if(this.isDateValid(dateTime)) {
+          newItem.isCompleted = false;
+          break;
+        }
+      }
+      (dateTime as any)[propertyName] = prevValue;
+      if(newItem.isCompleted && !this.isDateValid(dateTime)) {
+        data = data.slice(0, data.length - 1);
+      }
     }
-    newItem.value = data;
+    newItem.value = data || undefined;
     (dateTime as any)[propertyName] = parseInt(data) > 0 ? parseInt(data) : undefined;
   }
 
@@ -351,36 +372,6 @@ export class InputMaskDateTime extends InputMaskPattern {
     return result;
   }
 
-  private getPartsOld(input: string): Array<string> {
-    const inputParts: Array<string> = [];
-    const separatorLexems = this.lexems.filter(l => l.type === "separator");
-
-    let separatorLexemsIndex = 0;
-    do {
-      if (!separatorLexems[separatorLexemsIndex]) {
-        if (!!input) {
-          inputParts.push(input);
-          input = "";
-        }
-        break;
-      }
-
-      let separatorCharIndex = input.indexOf(separatorLexems[separatorLexemsIndex].value);
-      if (separatorCharIndex !== -1) {
-        const part = input.slice(0, separatorCharIndex);
-        if (!!part) {
-          inputParts.push(part);
-        }
-        input = input.slice(separatorCharIndex + 1);
-      } else {
-
-      }
-      separatorLexemsIndex++;
-    } while (!!input);
-
-    return inputParts;
-  }
-
   private getParts(input: string): Array<string> {
     const inputParts: Array<string> = [];
     const lexemsWithValue = this.lexems.filter(l => l.type !== "separator");

tests/mask/mask_datetime_tests.ts

@@ -242,6 +242,15 @@ QUnit.test("get masked date if text with dots m/d/yyyy", function(assert) {
   assert.equal(maskInstance._getMaskedValue("1.3.1987"), "1/3/1987");
 });
 
+QUnit.test("get masked date if set min & max mm/dd/yyyy", function(assert) {
+  const maskInstance = new InputMaskDateTime();
+  maskInstance.pattern = "mm/dd/yyyy";
+  maskInstance.min = "2024-04-01";
+  maskInstance.max = "2024-05-01";
+
+  assert.equal(maskInstance._getMaskedValue("05/3", false), "05/");
+});
+
 QUnit.test("get unmasked valid date text mm/dd/yyyy", function(assert) {
   const maskInstance = new InputMaskDateTime();
   maskInstance.pattern = "mm/dd/yyyy";
@@ -350,6 +359,19 @@ QUnit.test("dateTime processInput serial input: insert characters", function(ass
   assert.equal(result.caretPosition, 10, "type 0 2024");
 });
 
+QUnit.test("dateTime processInput serial input: insert characters v2", function(assert) {
+  const maskInstance = new InputMaskDateTime();
+  maskInstance.pattern = "mm/dd/yyyy";
+
+  let result = maskInstance.processInput({ insertedChars: "3", selectionStart: 3, selectionEnd: 3, prevValue: "04/dd/yyyy", inputDirection: "forward" });
+  assert.equal(result.value, "04/3d/yyyy", "type #1");
+  assert.equal(result.caretPosition, 4, "type #1");
+
+  result = maskInstance.processInput({ insertedChars: "3", selectionStart: 3, selectionEnd: 3, prevValue: "02/dd/yyyy", inputDirection: "forward" });
+  assert.equal(result.value, "02/03/yyyy", "type #2");
+  assert.equal(result.caretPosition, 6, "type #2");
+});
+
 QUnit.test("dateTime processInput serial input: insert characters m/d/yyyy", function(assert) {
   const maskInstance = new InputMaskDateTime();
   maskInstance.pattern = "m/d/yyyy";
@@ -628,4 +650,23 @@ QUnit.test("dateTime processInput: min & max", function(assert) {
   result = maskInstance.processInput({ insertedChars: "0", selectionStart: 9, selectionEnd: 9, prevValue: "04/05/198y", inputDirection: "forward" });
   assert.equal(result.value, "04/05/1980", "type 1");
   assert.equal(result.caretPosition, 10, "type 1");
+});
+
+QUnit.test("dateTime processInput: min & max small range", function(assert) {
+  const maskInstance = new InputMaskDateTime();
+  maskInstance.pattern = "mm/dd/yyyy";
+  maskInstance.min = "2024-04-01";
+  maskInstance.max = "2024-05-01";
+
+  let result = maskInstance.processInput({ insertedChars: "8", prevValue: "05/dd/yyyy", selectionStart: 3, selectionEnd: 3, inputDirection: "forward" });
+  assert.equal(result.value, "05/dd/yyyy", "try type 8");
+  assert.equal(result.caretPosition, 3, "try type 8");
+
+  result = maskInstance.processInput({ insertedChars: "3", prevValue: "05/dd/yyyy", selectionStart: 3, selectionEnd: 3, inputDirection: "forward" });
+  assert.equal(result.value, "05/dd/yyyy", "try type 3");
+  assert.equal(result.caretPosition, 3, "try type 3");
+
+  result = maskInstance.processInput({ insertedChars: "1", prevValue: "05/dd/yyyy", selectionStart: 3, selectionEnd: 3, inputDirection: "forward" });
+  assert.equal(result.value, "05/01/yyyy", "type 1");
+  assert.equal(result.caretPosition, 6, "type 1");
 });