diff --git a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts index 12e856d928f1c..99d0c98391178 100644 --- a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts +++ b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts @@ -26,5 +26,16 @@ describe('CalendarRange', () => { await documentationPage.prepareApiPageBeforeScreenshot(); await expect(page).toHaveScreenshot('calendar-range-max-length-click.png'); }); + + test('When set defaultViewedMonth, calendar shows defaultViewedMonth', async ({ + page, + }) => { + await tuiGoto(page, 'components/calendar-range/API?defaultViewedMonth$=2'); + + await documentationPage.prepareApiPageBeforeScreenshot(); + await expect(page).toHaveScreenshot( + 'calendar-range-default-viewed-month.png', + ); + }); }); }); diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts index 44ed3699af81d..b4974f5b89a1e 100644 --- a/projects/kit/components/calendar-range/calendar-range.component.ts +++ b/projects/kit/components/calendar-range/calendar-range.component.ts @@ -120,6 +120,9 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax this.value = this.previousValue; } + readonly monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, month) => + value.append({month}); + readonly mapper: TuiTypedMapper< [ readonly TuiDayRangePeriod[], diff --git a/projects/kit/components/calendar-range/calendar-range.template.html b/projects/kit/components/calendar-range/calendar-range.template.html index 04d7899a12849..4e984bcd3d05f 100644 --- a/projects/kit/components/calendar-range/calendar-range.template.html +++ b/projects/kit/components/calendar-range/calendar-range.template.html @@ -3,6 +3,7 @@ automation-id="tui-calendar-range__calendars" tuiPreventDefault="mousedown" [defaultViewedMonthFirst]="defaultViewedMonth" + [defaultViewedMonthSecond]="defaultViewedMonth | tuiMapper: monthOffset : 1" [disabledItemHandler]="calculatedDisabledItemHandler" [markerHandler]="markerHandler" [max]="computedMax | tuiMapper: maxLengthMapper : value : maxLength : false" diff --git a/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts b/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts index 04ecbf884d905..2795542ec11a4 100644 --- a/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts +++ b/projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts @@ -62,6 +62,15 @@ describe('PrimitiveRangeCalendar component', () => { component.ngOnInit(); expect(component.userViewedMonthFirst).toEqual(minDate); }); + + it('When initialized with setted input defaultViewedMonthFirst, shows defaultViewedMonthFirst', () => { + const month = new TuiMonth(2020, 5); + + component.defaultViewedMonthFirst = month; + component.ngOnInit(); + + expect(component.userViewedMonthFirst).toBe(month); + }); }); describe('viewedMonthSecond', () => { @@ -105,6 +114,15 @@ describe('PrimitiveRangeCalendar component', () => { expect(component.userViewedMonthSecond).toEqual(minDate.append({month: 1})); }); + + it('When initialized with setted input defaultViewedMonthSecond, shows defaultViewedMonthSecond', () => { + const month = new TuiMonth(2020, 5); + + component.defaultViewedMonthSecond = month; + component.ngOnInit(); + + expect(component.userViewedMonthSecond).toBe(month); + }); }); describe('cappedUserViewedMonthSecond', () => {