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 as Appointment Picker
A React appointment booking date picker combining calendar navigation with available time slot selection in a split-panel interface
Date Picker with Date and Time
A React date and time picker combining calendar selection with an HTML5 time input field for precise datetime scheduling in a unified interface