Problem
The date picker components are currently inconsistent with the application's supported calendar years (defined in fdm-app/app/lib/calendar.ts as current year + 1):
- DatePicker (v1): Uses a hardcoded
endMonth of 2030. This is a "magic number" that requires manual maintenance and doesn't reflect the actual logic of the application.
- DatePickerV2: Uses the default behavior of
react-day-picker, which limits date selection to the last month of the current year. This prevents users from selecting dates in the next year (e.g., 2026), even though the application logic supports it.
Proposed Solution
We should derive the date picker boundaries dynamically from the central calendar configuration to ensure consistency and maintainability.
Plan
-
Update calendar.ts:
- Export
startMonth and endMonth constants derived from the existing yearStart and yearEnd variables.
endMonth should be set to December of yearEnd (current year + 1).
-
Update DatePicker (v1):
- Import
endMonth from ~/lib/calendar.
- Replace the hardcoded
new Date(2030, 11) with the dynamic endMonth.
-
Update DatePickerV2:
- Import
startMonth and endMonth from ~/lib/calendar.
- Pass these as props to the
Calendar component to explicitly set the allowed date range, enabling selection of the next year.
Expected Outcome
- Consistent UX: Users will be able to select valid dates across all supported years in both date pickers.
- Maintainability: Future changes to the supported years in
calendar.ts will automatically propagate to the UI.
Problem
The date picker components are currently inconsistent with the application's supported calendar years (defined in
fdm-app/app/lib/calendar.tsascurrent year + 1):endMonthof2030. This is a "magic number" that requires manual maintenance and doesn't reflect the actual logic of the application.react-day-picker, which limits date selection to the last month of the current year. This prevents users from selecting dates in the next year (e.g., 2026), even though the application logic supports it.Proposed Solution
We should derive the date picker boundaries dynamically from the central calendar configuration to ensure consistency and maintainability.
Plan
Update
calendar.ts:startMonthandendMonthconstants derived from the existingyearStartandyearEndvariables.endMonthshould be set to December ofyearEnd(current year + 1).Update
DatePicker(v1):endMonthfrom~/lib/calendar.new Date(2030, 11)with the dynamicendMonth.Update
DatePickerV2:startMonthandendMonthfrom~/lib/calendar.Calendarcomponent to explicitly set the allowed date range, enabling selection of the next year.Expected Outcome
calendar.tswill automatically propagate to the UI.