[v11] Datepicker: Error when trying to select the year after selecting a date in range mode.

[ThiagoBarbosaDev]

Describe the bug

The bug is currently reproduceable on your own docs.

Having a date in selected in range mode in the datepicker and clicking on the years throws a typeError:

This is the error stack:

Error caught by Error Boundary: TypeError: s7.getFullYear is not a function
At useDatePicker.ts:289
year DatePicker.style.ts:174
m resolve.ts:4
F2 getKeyValue.ts:13
D useComponentStyle.ts:118
hr DatePickerTableBodyCell.tsx:82
render DatePickerTableBodyCell.tsx:97
React 18
Vt useDatePicker.ts:554
React 26
performWorkUntilDeadline scheduler.development.js:45
js scheduler.development.js:223
js scheduler.development.js:364
__require2 chunk-PLDDJCW6.js:17
js index.js:6
__require2 chunk-PLDDJCW6.js:17
React 2
__require2 chunk-PLDDJCW6.js:17
js React
__require2 chunk-PLDDJCW6.js:17
react-dom_client.js:20192

Reproducer

No response

System Information

It is reproduceable on your own docs.

Steps to reproduce the behavior

1. Open https://v11.primereact.org/docs/components/datepicker on the Range Example

2. Select two dates

3. Click the year

4. After the click the page breaks

Expected behavior

The page doesn't break and it shows the year picker.

[Coderxrohan]

Things noticed in issue

Problem:
In DatePicker range mode, clicking the year selector after selecting a date range causes a runtime error because the logic assumes a single Date object. In range mode, the value is an array ([startDate, endDate] or [Date, null]), leading to getFullYear() being called on a non-Date.

Fix:
Update the year-picker logic to handle range values safely by extracting a valid Date from the range (prefer startDate, fallback to endDate or viewDate) and guard against non-Date inputs before calling getFullYear().

Impact:
Prevents crashes when switching to the year view in range mode, restores expected behavior on the docs and apps, and improves type safety without introducing breaking changes.

Level:
Medium-severity bug

[Coderxrohan]

I’m currently looking into this issue and investigating a possible fix. Will share updates once I have more clarity.

[Coderxrohan]

8468.mp4

[Coderxrohan]

@melloware & @ThiagoBarbosaDev
I addressed this by fixing the year-selection logic in the headless DatePicker to correctly handle range values. The fix normalizes array-based selections (range/multiple) before treating values as single Date objects, ensuring getFullYear() is only called on valid Date instances.

Please let me know if this approach looks good to you, or if you’d prefer any adjustments or additional cases to be handled.

[SauravRocks47]

@melloware & @ThiagoBarbosaDev I addressed this by fixing the year-selection logic in the headless DatePicker to correctly handle range values. The fix normalizes array-based selections (range/multiple) before treating values as single Date objects, ensuring getFullYear() is only called on valid Date instances.

Please let me know if this approach looks good to you, or if you’d prefer any adjustments or additional cases to be handled.

This looks like a valid fix.
Normalizing the range value before calling getFullYear() makes sense and aligns with how range/multiple modes behave.