fix(kit): InputDateTime not reset initial value to min/max and show…

… actual in calendar (#10258)
taiga-family · Feb 3, 2025 · 4be8fb0 · 4be8fb0
1 parent 16cb47a
commit 4be8fb0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts b/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
@@ -274,5 +274,21 @@ describe('InputDateTime', () => {
                 {animations: 'allow'},
             );
         });
+
+        test('Actual min/max in calendar', async () => {
+            example = documentationPage.getExample('#base');
+            inputDateTime = new TuiInputDateTimePO(
+                example.locator('tui-input-date-time'),
+            );
+
+            await inputDateTime.textfield.click();
+
+            await expect(inputDateTime.textfield).toHaveScreenshot(
+                '05-input-date-time-actual-min-max.png',
+            );
+            await expect(inputDateTime.calendar).toHaveScreenshot(
+                '05-input-date-time-calendar-actual-min-max.png',
+            );
+        });
     });
 });
diff --git a/projects/demo/src/modules/components/input-date-time/examples/1/index.html b/projects/demo/src/modules/components/input-date-time/examples/1/index.html
@@ -2,7 +2,11 @@
     class="b-form"
     [formGroup]="testForm"
 >
-    <tui-input-date-time formControlName="testValue">
+    <tui-input-date-time
+        formControlName="testValue"
+        [max]="max"
+        [min]="min"
+    >
         Choose date and time
         <input
             placeholder="OCT 26 1985 01:22"

diff --git a/projects/demo/src/modules/components/input-date-time/examples/1/index.ts b/projects/demo/src/modules/components/input-date-time/examples/1/index.ts
@@ -14,4 +14,8 @@ export class TuiInputDateTimeExample1 {
     readonly testForm = new FormGroup({
         testValue: new FormControl([new TuiDay(2017, 2, 15), null]),
     });
+
+    readonly min = new TuiDay(2017, 2, 25);
+
+    readonly max = new TuiDay(2040, 2, 20);
 }
diff --git a/projects/kit/components/input-date-time/input-date-time.component.ts b/projects/kit/components/input-date-time/input-date-time.component.ts
@@ -21,8 +21,10 @@ import {
     DATE_FILLER_LENGTH,
     TUI_DATE_FORMAT,
     TUI_DATE_SEPARATOR,
+    TUI_FIRST_DAY,
     TUI_IS_IOS,
     TUI_IS_MOBILE,
+    TUI_LAST_DAY,
     TuiActiveZoneDirective,
     tuiAsControl,
     tuiAsFocusableItemAccessor,
@@ -156,10 +158,28 @@ export class TuiInputDateTimeComponent
     }
 
     get computedMin(): TuiDay | [TuiDay, TuiTime] {
+        /**
+         * TODO: we can delete this workaround in v4.0
+         * after solving this issue:
+         * https://github.com/taiga-family/maskito/issues/604
+         */
+        if (this.value && this.control?.pristine) {
+            return TUI_FIRST_DAY;
+        }
+
         return this.toTuiDay(this.min, this.options.min);
     }
 
     get computedMax(): TuiDay | [TuiDay, TuiTime] {
+        /**
+         * TODO: we can delete this workaround in v4.0
+         * after solving this issue:
+         * https://github.com/taiga-family/maskito/issues/604
+         */
+        if (this.value && this.control?.pristine) {
+            return TUI_LAST_DAY;
+        }
+
         return this.toTuiDay(this.max, this.options.max);
     }
 
@@ -214,13 +234,13 @@ export class TuiInputDateTimeComponent
     }
 
     get calendarMinDay(): TuiDay {
-        const min = this.computedMin;
+        const min = this.toTuiDay(this.min, this.options.min);
 
         return Array.isArray(min) ? min[0] : min;
     }
 
     get calendarMaxDay(): TuiDay {
-        const max = this.computedMax;
+        const max = this.toTuiDay(this.max, this.options.max);
 
         return Array.isArray(max) ? max[0] : max;
     }