feat(core): Calendar not switch to large date (#9587)

taiga-family · Oct 24, 2024 · 4575a40 · 4575a40
2 parents 0f67a78 + 2b453c7
commit 4575a40
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 8 deletions.
diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts
@@ -109,6 +109,7 @@ import {
     host: {
         '[class._ios]': 'isIOS',
         '[class._initialized]': 'initialized',
+        '(mousedown.prevent)': '0',
     },
 })
 export class TuiMobileCalendar implements AfterViewInit {

diff --git a/projects/cdk/date-time/date-time.ts b/projects/cdk/date-time/date-time.ts
@@ -18,6 +18,8 @@ export const MIN_YEAR = 0;
 
 export const MAX_YEAR = 9999;
 
+export const MAX_DISPLAYED_YEAR = 2099;
+
 export const RANGE_SEPARATOR_CHAR = `${CHAR_NO_BREAK_SPACE}${CHAR_EN_DASH}${CHAR_NO_BREAK_SPACE}`;
 
 export const MILLISECONDS_IN_SECOND = 1000;

diff --git a/projects/cdk/date-time/days.const.ts b/projects/cdk/date-time/days.const.ts
@@ -1,6 +1,15 @@
-import {MAX_MONTH, MAX_YEAR, MIN_DAY, MIN_MONTH, MIN_YEAR} from './date-time';
+import {
+    MAX_DISPLAYED_YEAR,
+    MAX_MONTH,
+    MAX_YEAR,
+    MIN_DAY,
+    MIN_MONTH,
+    MIN_YEAR,
+} from './date-time';
 import {TuiDay} from './day';
 
 export const TUI_FIRST_DAY = new TuiDay(MIN_YEAR, MIN_MONTH, MIN_DAY);
 
 export const TUI_LAST_DAY = new TuiDay(MAX_YEAR, MAX_MONTH, 31);
+
+export const TUI_LAST_DISPLAYED_DAY = new TuiDay(MAX_DISPLAYED_YEAR, MAX_MONTH, 31);
diff --git a/projects/core/components/calendar/calendar.component.ts b/projects/core/components/calendar/calendar.component.ts
@@ -8,7 +8,13 @@ import {
 } from '@angular/core';
 import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk/constants';
 import type {TuiDayRange} from '@taiga-ui/cdk/date-time';
-import {TUI_FIRST_DAY, TUI_LAST_DAY, TuiDay, TuiMonth} from '@taiga-ui/cdk/date-time';
+import {
+    TUI_FIRST_DAY,
+    TUI_LAST_DAY,
+    TUI_LAST_DISPLAYED_DAY,
+    TuiDay,
+    TuiMonth,
+} from '@taiga-ui/cdk/date-time';
 import {TuiMapperPipe} from '@taiga-ui/cdk/pipes/mapper';
 import type {TuiBooleanHandler, TuiMapper} from '@taiga-ui/cdk/types';
 import {tuiNullableSame} from '@taiga-ui/cdk/utils/miscellaneous';
@@ -79,7 +85,11 @@ export class TuiCalendar {
     public set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null) {
         this.day = value;
 
-        if (this.showAdjacent && value instanceof TuiDay) {
+        if (
+            this.showAdjacent &&
+            value instanceof TuiDay &&
+            value.daySameOrBefore(TUI_LAST_DISPLAYED_DAY)
+        ) {
             this.month = value;
         }
     }

diff --git a/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts b/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts
@@ -180,6 +180,19 @@ test.describe('InputDate', () => {
 
             await expect(inputDate.textfield).toHaveScreenshot('10-input-date.png');
         });
+
+        test('Click `Until today`', async ({page}) => {
+            await tuiGoto(page, 'components/input-date/API?items$=1');
+
+            await inputDate.textfield.click();
+            await calendar.itemButton.click();
+
+            await inputDate.textfield.click();
+
+            await expect(inputDate.calendar).toHaveScreenshot(
+                '02-input-date-calendar.png',
+            );
+        });
     });
 
     test.describe('Mobile', () => {

diff --git a/projects/legacy/components/input-date/input-date.component.ts b/projects/legacy/components/input-date/input-date.component.ts
@@ -15,6 +15,7 @@ import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk/constants';
 import type {TuiDateMode} from '@taiga-ui/cdk/date-time';
 import {
     DATE_FILLER_LENGTH,
+    TUI_LAST_DISPLAYED_DAY,
     tuiDateClamp,
     TuiDay,
     TuiMonth,
@@ -201,15 +202,21 @@ export class TuiInputDateComponent
     }
 
     protected get computedActiveYearMonth(): TuiMonth {
+        const clampedDate = tuiDateClamp(
+            this.defaultActiveYearMonth,
+            this.computedMin,
+            this.computedMax,
+        );
+
+        if (this.value?.dayAfter(TUI_LAST_DISPLAYED_DAY)) {
+            return this.month || clampedDate;
+        }
+
         if (this.items[0] && this.value?.daySame(this.items[0].day)) {
             return this.items[0].displayDay;
         }
 
-        return (
-            this.month ||
-            this.value ||
-            tuiDateClamp(this.defaultActiveYearMonth, this.computedMin, this.computedMax)
-        );
+        return this.month || this.value || clampedDate;
     }
 
     protected get computedMask(): MaskitoOptions {