Shadcn.io is not affiliated with official shadcn/ui
Date Picker with Multiple Day Selection
A React date picker allowing multiple individual date selection for choosing non-consecutive days like recurring event dates or availability marking
Picking employee work schedules, selecting multiple training dates, or marking available days—sometimes you need several specific dates, not a range. This React multi-select date picker uses shadcn/ui Calendar with mode equals multiple, letting users click individual dates to build a custom set. Built with Radix UI and react-day-picker, selected dates highlight and users can click again to deselect—perfect for shift scheduling, event attendance, availability calendars, and any workflow requiring cherry-picked dates.
Date Picker with Multiple Day Selection preview
Installation
Related Components
Date Range Picker
Select continuous start and end date ranges
Disabled Dates
Calendar with specific dates unavailable
Custom Styled Calendar
Calendar with custom day styling and modifiers
Appointment Picker
Calendar with time slot selection
Natural Language Shortcuts
Quick select buttons for common dates
Month and Year Selector
Dropdown selectors for month and year
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Date Picker with Natural Language
A React date picker with natural language quick select shortcuts like Today, Tomorrow, and In a week for faster common date selection