Filter datepicker selectors and disable out-of-range navigation buttons

[lassopicasso]

Description

This PR ensures that years and months outside of minDate and maxDate are not selectable.
If the user has december 2025 selected, with maxDate in january 2026, and switches to year 2026, the month selector automatically updates to the latest available month (january) instead of keeping the previous selection.

Additionally, the previous/next month buttons are disabled when this will result in navigating beyond the configured limits.

Example below where maxDate is set to 28th of march 2026.

datepicker-updated-logic.mp4

Related Issue(s)

• closes DatePicker: Limit years in the drop-down year picker to allowed dates #4076

Verification/QA

• Manual functionality testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added/updated
  • Cypress E2E test(s) have been added/updated
  • No automatic tests are needed here (no functional changes/additions)
  • I want someone to help me make some tests
• UU/WCAG (follow these guidelines until we have our own)
  • I have tested with a screen reader/keyboard navigation/automated wcag validator
  • No testing done/necessary (no DOM/visual changes)
  • I want someone to help me perform accessibility testing
• User documentation @ altinn-studio-docs
  • Has been added/updated
  • No functionality has been changed/added, so no documentation is needed
  • I will do that later/have created an issue
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
  • I don't have permissions to do that, please help me out
• Labels
  • I have added a kind/* and backport* label to this PR for proper release notes grouping
  • I don't have permissions to add labels, please help me out

Summary by CodeRabbit

• Bug Fixes

  • Datepicker navigation now correctly disables previous/next when at the configured minimum or maximum date.
  • Month and year dropdown lists are constrained to the configured date range, hiding out-of-range options.

• Tests

  • Added unit tests for navigation button disabling and dropdown year bounds.
  • Adjusted an end-to-end test to wait for save completion before opening the datepicker.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9cd8b1d8-838e-4c82-9c5d-7dddc02e39c6

📥 Commits

Reviewing files that changed from the base of the PR and between b0e837a and f408cb0.

📒 Files selected for processing (1)

• test/e2e/integration/component-library/date-picker.ts

---

📝 Walkthrough

Walkthrough

Datepicker tests were added and the Datepicker now forwards calculated min/max dates into DropdownCaption; DropdownCaption's prop types and navigation logic were updated to respect optional minDate/maxDate when building year/month options and enabling/disabling navigation.

Changes

Cohort / File(s)	Summary
Unit tests src/layout/Datepicker/DatepickerComponent.test.tsx	Added three tests: year dropdown constrained to ±1 year window (asserts out-of-range years absent), previous-month nav disabled when minDate is start of current month, and next-month nav disabled when maxDate is end of next month.
Component integration src/layout/Datepicker/DatepickerComponent.tsx	Now injects calculatedMinDate/calculatedMaxDate into the caption by passing an inline wrapper that renders DropdownCaption with forwarded props plus minDate/maxDate.
Dropdown logic / API src/layout/Datepicker/DropdownCaption.tsx	Export signature updated to accept optional minDate?: Date and maxDate?: Date. Year/month option ranges and navigation clamp logic now honor provided bounds; arrow disabled states consider bounds. date-fns min/max usage removed in favor of conditional branching.
E2E test tweak test/e2e/integration/component-library/date-picker.ts	Inserted cy.waitUntilSaved() after blurring the max date input to wait for persistence before opening the date picker dialog.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: filtering datepicker year/month selectors and disabling out-of-range navigation buttons.
Description check	✅ Passed	The PR description is comprehensive with a clear explanation of changes, links to the related issue, and verification checkboxes appropriately completed including manual testing and unit tests.
Linked Issues check	✅ Passed	The code changes successfully address issue #4076 by limiting year dropdown options to configured date ranges, preventing out-of-range selection, and disabling navigation buttons appropriately.
Out of Scope Changes check	✅ Passed	All changes are directly related to the PR objectives: year/month filtering in DropdownCaption, enhanced date constraint logic in DatepickerComponent, and corresponding unit tests. One E2E test adjustment appears to address timing concerns with date persistence.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch filter/disable-restricted-dates-in-datepicker

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/layout/Datepicker/DatepickerComponent.test.tsx`:
- Line 6: The tests import date-fns helpers (endOfYear, startOfYear) and build
local-midnight Date instances which become flaky across timezones; replace those
imports with the repository UTC helper (use the file's existing UTC-noon
fixtures or a helper like utcNoon/utcDateAtNoon) and update the three test
suites that construct local-midnight dates to instead use UTC-noon fixtures
(e.g., 'YYYY-MM-DDT12:00:00.000Z' or the existing defaultStart/defaultEnd
constants) before calling toISOString(), ensuring all date construction in the
DatepickerComponent tests uses timezone-safe UTC fixtures rather than
local-midnight Dates.

In `@src/layout/Datepicker/DropdownCaption.tsx`:
- Around line 17-22: The DropdownCaption currently uses calendarMonth.date
directly for the select values causing a mismatch when calendarMonth is outside
minDate/maxDate; update DropdownCaption to clamp the initially displayed month
by computing a clampedDate = clamp(calendarMonth.date, minDate, maxDate) (or
similar) and use that clampedDate for the initial selected year/month and any
derived values (e.g., when building years/months options and the select value).
Ensure the same clamping logic is applied where calendarMonth.date is used for
initial selection (also in the corresponding code around lines 42-48) so the
caption's selected option always matches the filtered years/months.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 52a365bc-485e-4c7d-b52e-ed919e83b371

📥 Commits

Reviewing files that changed from the base of the PR and between b20d12f and 34f0ee1.

📒 Files selected for processing (3)

• src/layout/Datepicker/DatepickerComponent.test.tsx
• src/layout/Datepicker/DatepickerComponent.tsx
• src/layout/Datepicker/DropdownCaption.tsx

[walldenfilippa]

Nice done! 🥳

The Cypress test that failed looks like a flaky test. It seems that minDatePicker and maxDatePicker are sometimes not saved before Cypress checks the date button: cy.findByRole('button', { name: /tirsdag 1. juli 2025/i }).should('be.disabled');.

I suggest adding a waitUntilSaved() after setting minDatePicker and maxDatePicker in the date‑picker test. This appears to resolve the flakiness.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
55.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[walldenfilippa]

I added waitUntilSaved() after initializing minDatePicker and maxDatePicker in the cypress test.

[lassopicasso]

Supert, takk for at du såg på den og fikset testen, Filippa! Jeg bare merget den nå 😄