shadcn.io is not affiliated with official shadcn/ui
Date Picker examples · Standard
Date Picker as Appointment Picker for React
A date picker that opens a calendar beside a list of time slots for booking an appointment.
A button that opens the Date Picker with the month on one side and fourteen time slots on the other, from 9:00 AM to 4:30 PM. Pick a day, then a time: the button reads the date at the time, such as October 10, 2026 at 10:30 AM. Use it for booking calls, visits and reservations where the day and the slot are chosen together.
Preview
Installation
FAQ
Why doesn't the picker close when I pick a day?
closeOnSelect is false on DatePicker, so it stays open for the time. Escape, a click outside or the button close it.
Where do the time slots come from?
A fixed list of fourteen strings in the file, half-hour steps with a lunch gap. The selected one is a solid button and the rest are outlined. Load the list for the picked day from your booking system to show real availability.
What does the button say?
The date in long form, plus at and the time once a slot is picked, or Pick a date and time with neither. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.
How are the calendar and the slots laid out?
DatePickerContent is a row split by divide-x. The calendar keeps its padding, and the slots column has a fixed width with the Available Times heading and a Scroll Area that fills the calendar's height.
Related
- Date Picker with Date and TimeA date picker with a time field under the
- Date Picker with RangeA date range picker that shows two months
- Date Picker with Natural LanguageA date picker with quick-select shortcuts
- Date Picker with Disabled DatesA date picker that disables weekends, a
- Date Picker with Month and Year SelectorA date picker with month and year
- Date Picker with Custom Select Day StyleA date picker with round days that