Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React 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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React 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
React Date Picker as Appointment Picker
A React appointment booking date picker combining calendar navigation with available time slot selection in a split-panel interface