Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Booking a hotel room, filtering sales reports, or scheduling a vacation—date ranges are everywhere. This React date picker with range selection shows two months at once using shadcn/ui and Radix UI, making it dead simple to pick start and end dates without endless clicking. Built with react-day-picker and date-fns, it formats ranges beautifully and works perfectly for booking systems, analytics filters, and scheduling tools.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Appointment Picker
Calendar with time slot selection for bookings
Natural Language Shortcuts
Date picker with quick select options like Today
Disabled Dates
Date picker with weekends and specific dates disabled
Date and Time Picker
Combined date and time selection input
Month and Year Selector
Date picker with dropdown month/year navigation
Multiple Day Selection
Select multiple individual dates at once
Questions you might have
React Paginated Data Table
A React data table with pagination controls using TanStack Table getPaginationRowModel and shadcn/ui Button for Previous/Next navigation
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