shadcn.io is not affiliated with official shadcn/ui
Date Picker examples · Standard
Date Picker with Custom Select Day Style for React
A date picker with round days that highlights booked dates in bold.
A Date Picker whose days are circles, with three booked days of the current month shaded in the warning color and set in bold. The days are rendered by the example instead of the default table body, so each one can take its own classes. Use it to mark holidays, deadlines or days that are already full.
Preview
Installation
FAQ
How are the booked days styled?
The example renders the month's weeks itself and gives each day cell rounded-full, plus bg-warning/20 font-bold text-warning-foreground when the day is in the booked list. The selected day keeps the primary fill.
Which days are booked?
The 6th, 14th and 25th of the current month, built once when the module loads. Replace the list with dates from your data.
Can a booked day still be picked?
Yes, the styling doesn't change behavior. To block those days, return true for them from isDateUnavailable, as the disabled dates example does.
What does the button say?
The selected date in long form, such as October 10, 2026, or Pick a date when nothing is selected. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.
Related
- Date Picker with Disabled DatesA date picker that disables weekends, a
- Date Picker with RangeA date range picker that shows two months
- Date Picker as Appointment PickerA date picker that opens a calendar
- Date Picker with Multiple Day SelectionA date picker for choosing several
- Date Picker with Natural LanguageA date picker with quick-select shortcuts
- Date Picker with Month and Year SelectorA date picker with month and year