Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Date Picker with Disabled Dates
A React date picker with disabled dates including weekends, specific date ranges, and individual unavailable days for business scheduling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Need to prevent users from booking weekends? Block out holiday ranges? Disable specific unavailable dates? This React date picker lets you disable any combination of dates using shadcn/ui and react-day-picker's matcher system. Built with Radix UI and date-fns, you can block weekends, date ranges, and individual dates—perfect for business appointment booking, delivery scheduling, office hour calendars, and any system where certain dates are off-limits.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Appointment Picker
Calendar with available time slot selection
Date Range Picker
Two-month calendar for range selection
Custom Styled Calendar
Calendar with custom day appearance and modifiers
Natural Language Shortcuts
Quick select shortcuts for common dates
Month and Year Selector
Dropdown navigation for month and year
Date and Time Picker
Combined date and time selection
Questions you might have
React 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
React 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