Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Month and Year Selector in Dialog
A calendar dialog with dropdown month and year selectors for quick navigation to distant dates
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Clicking through months to reach birthdates or historical data wastes time. This React calendar dialog replaces arrow navigation with dropdown selectors using shadcn/ui components. Built with Dialog, Calendar, and Select, users jump directly to any month and year. Perfect for birthdate pickers in registration forms, historical event scheduling, or any application where users frequently navigate to dates beyond recent months requiring efficient distant date access.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Month/Year Calendar Inline
Dropdown navigation without dialog
Range Calendar Dialog
Dual-month range selection
Standard Dialog
Basic modal dialog structure
Select Component
Dropdown selections
Date & Time Dialog
Date picker with time input
Date Picker Popover
Date selection in popover