Shadcn.io is not affiliated with official shadcn/ui
Date Picker with Month and Year Selector
A React date picker with dropdown month and year selectors for quick navigation to any date without clicking through months sequentially
You know that frustration when someone needs to pick their birthdate and has to click the left arrow 400 times? This React date picker adds dropdown selectors for month and year using shadcn/ui's Select component and react-day-picker. Built with Radix UI and date-fns, users jump directly to any month and year—perfect for birthdates, historical dates, or long-range scheduling where clicking through months one-by-one is painful.
Date Picker with Month and Year Selector preview
Installation
Related Components
Date Range Picker
Two-month calendar for selecting date ranges
Natural Language Shortcuts
Quick select buttons like Today and Tomorrow
Disabled Dates
Calendar with specific dates and ranges disabled
Appointment Picker
Date picker with available time slots
Date and Time Picker
Combined calendar and time input field
Custom Styled Calendar
Calendar with custom day styling and modifiers
FAQ
Was this page helpful?
Sign in to leave feedback.
Date Picker with Range
A React date range picker displaying two months side-by-side for selecting start and end dates in booking flows and analytics dashboards
Date Picker as Appointment Picker
A React appointment booking date picker combining calendar navigation with available time slot selection in a split-panel interface