fix(kit): DateTime validate min / max if date is complete (#314)

taiga-family · May 23, 2023 · 5783e76 · 5783e76
1 parent 9d215b8
commit 5783e76
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/projects/demo-integrations/cypress/tests/kit/date-time/date-time-min-max.cy.ts b/projects/demo-integrations/cypress/tests/kit/date-time/date-time-min-max.cy.ts
@@ -40,6 +40,29 @@ describe('DateTime | Min & Max dates', () => {
                 .should('have.prop', 'selectionStart', '05.05.202'.length)
                 .should('have.prop', 'selectionEnd', '05.05.202'.length);
         });
+
+        describe('Correct value after date only input', () => {
+            it('06.06.202| => Type 5 => 05.05.2020| (max value)', () => {
+                cy.get('@input')
+                    .type('06.06.202')
+                    .should('have.value', '06.06.202')
+                    .should('have.prop', 'selectionStart', '06.06.202'.length)
+                    .should('have.prop', 'selectionEnd', '06.06.202'.length)
+                    .type('5')
+                    .should('have.value', '05.05.2020')
+                    .should('have.prop', 'selectionStart', '05.05.2020'.length)
+                    .should('have.prop', 'selectionEnd', '05.05.2020'.length);
+            });
+
+            it('0|1.05.2020 => Type 9 => 05|.05.2020 (max value)', () => {
+                cy.get('@input')
+                    .type('01052020')
+                    .type('{leftArrow}'.repeat('1.05.2020'.length))
+                    .type('9')
+                    .should('have.value', '05.05.2020')
+                    .should('have.prop', 'selectionStart', '05.'.length);
+            });
+        });
     });
 
     describe('Min', () => {
@@ -81,5 +104,28 @@ describe('DateTime | Min & Max dates', () => {
                 .should('have.prop', 'selectionStart', '14.10.'.length)
                 .should('have.prop', 'selectionEnd', '14.10.'.length);
         });
+
+        describe('Correct value after date only input', () => {
+            it('14.10.199 => Type 3 => 14.10.1995| (min)', () => {
+                cy.get('@input')
+                    .type('14.10.199')
+                    .should('have.value', '14.10.199')
+                    .should('have.prop', 'selectionStart', '14.10.199'.length)
+                    .should('have.prop', 'selectionEnd', '14.10.199'.length)
+                    .type('3')
+                    .should('have.value', '14.10.1995')
+                    .should('have.prop', 'selectionStart', '14.10.1995'.length)
+                    .should('have.prop', 'selectionEnd', '14.10.1995'.length);
+            });
+
+            it('14.10.199|5 => Type 3 => 14.10.1995| (min)', () => {
+                cy.get('@input')
+                    .type('14.10.1995')
+                    .type('{leftArrow}')
+                    .type('3')
+                    .should('have.value', '14.10.1995')
+                    .should('have.prop', 'selectionStart', '14.10.1995'.length);
+            });
+        });
     });
 });
diff --git a/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts b/projects/kit/src/lib/masks/date-time/postprocessors/min-max-date-time-postprocessor.ts
@@ -5,6 +5,7 @@ import {MaskitoTimeMode} from '../../../types';
 import {
     clamp,
     dateToSegments,
+    isDateStringComplete,
     parseDateString,
     segmentsToDate,
     toDateString,
@@ -31,8 +32,15 @@ export function createMinMaxDateTimePostprocessor({
 
         if (!isDateTimeStringComplete(value, dateModeTemplate, timeMode)) {
             const fixedDate = raiseSegmentValueToMin(parsedDate, dateModeTemplate);
+            const {year, month, day} = isDateStringComplete(dateString, dateModeTemplate)
+                ? dateToSegments(clamp(segmentsToDate(fixedDate), min, max))
+                : fixedDate;
+
             const fixedValue = toDateString(
-                {...fixedDate, ...parsedTime},
+                {
+                    ...{year, month, day},
+                    ...parsedTime,
+                },
                 dateModeTemplate,
                 timeMode,
             );