Shadcn.io is not affiliated with official shadcn/ui
Date Picker with Custom Select Day Style
A React date picker with custom day styling using modifiers and modifiersStyles to highlight booked dates, holidays, or special occasions with colors
Want to show which hotel dates are booked? Highlight price drops? Mark holidays in gold? This React date picker uses react-day-picker's modifiers and modifiersStyles to custom-style any dates with colors, fonts, or backgrounds. Built with shadcn/ui and Radix UI, you define modifier rules and styles—dates matching those rules get your custom appearance—perfect for booking calendars showing availability, pricing calendars with color-coded rates, and holiday planners with visually distinct special dates.
Date Picker with Custom Select Day Style preview
Installation
Related Components
Disabled Dates
Calendar with unavailable dates blocked out
Date Range Picker
Two-month calendar for range selection
Appointment Picker
Calendar with available time slots
Multiple Day Selection
Select multiple individual dates
Natural Language Shortcuts
Quick select buttons for common dates
Month and Year Selector
Dropdown navigation for dates
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Standard
A basic modal dialog with header, content area, and footer for displaying focused information and actions