Tuesday, May 5, 2026

Fix Birth Date Picker Year/Month Navigation

Volleyball Elite Academy development update
Volleyball Elite Academy
Fix Birth Date Picker Year/Month Navigation

Fix Birth Date Picker Year/Month Navigation

Volleyball Elite Academy — Development Update • May 5, 2026

Fix Birth Date Picker Year/Month Navigation

What & Why

The birth date calendar on the My Profile page only lets users navigate one month at a time using left/right arrows. Reaching a birth year like 1990 would require clicking backwards hundreds of times. The shadcn Calendar component supports built-in dropdown navigation for year and month — this just needs to be enabled.

Done looks like

  • Clicking the birth date field opens a calendar where the header shows clickable month and year dropdowns
  • Users can jump directly to any year from 1920 to the current year
  • Users can jump directly to any month without stepping through one at a time
  • After selecting year and month, days are shown and the user can pick one
  • The selected date still saves and displays correctly (e.g. "May 4th, 1995")

Out of scope

  • Changing birth date pickers on other pages (register, community-join use plain and are unaffected)
  • Changing event date pickers in events-management

Steps

1. Enable dropdown navigation on the Calendar — Add , , and props to the component inside the birth date in . This activates the built-in react-day-picker year and month dropdowns without any new dependencies.

2. Style the dropdowns — Ensure the dropdowns inside the calendar caption are readable and match the app's existing theme (border, background, font size). Add to the Calendar if the default dropdown appearance needs adjustment to fit within the popover width cleanly.

Relevant files

-

Volleyball Elite Academy

Reply to this email — we read every reply.

You received this because you have an account with Volleyball Elite Academy.

elitevolleyball.training

No comments:

Post a Comment