shadcn.io is an independent project built on shadcn/ui
The button shows a calendar icon and today's date. The popover puts a month beside a list labeled Available Times, from 09:00 AM down to 04:30 PM.
Use it to book a date and a slot together. A Calendar alone is enough when there is no time to pick. In Svelte, Ark UI does not know which times are free.
Installation
Anatomy
Usage
<DatePicker closeOnSelect={false} onValueChange={handleValueChange} positioning={positioning} value={value}><DatePickerTrigger>{#snippet asChild(props)}<Button {...props({ class: "w-70 justify-start font-normal" })} variant="outline"><CalendarIcon aria-hidden="true" data-icon="inline-start" /><span>{label}</span></Button>{/snippet}</DatePickerTrigger><DatePickerContent class="flex divide-x overflow-hidden p-0"><div class="p-3"><CalendarViewControl><CalendarPrevTrigger /><CalendarViewDate /><CalendarNextTrigger /></CalendarViewControl><CalendarTable><CalendarWeekDays /><CalendarTableDays /></CalendarTable></div><div class="relative w-62 overflow-hidden"><div class="absolute inset-0 flex flex-col gap-4"><p class="px-4 pt-4 text-center font-medium text-sm">Available Times</p><ScrollArea class="min-h-0 flex-1"><div class="flex flex-col gap-2 px-4 pb-4">{#each availableTimes as time (time)}<Button onclick={handleTimeClick} size="sm" value={time} variant={selectedTime === time ? "default" : "outline"}>{time}</Button>{/each}</div></ScrollArea></div></div></DatePickerContent></DatePicker>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.
API Reference
Date Picker
Sets closeOnSelect={false}, onValueChange={handleValueChange}, positioning={positioning} and value={value}. The rest is on the Date Picker page.
Button
Sets props, w-70, justify-start, font-normal, variant="outline" and onclick={handleTimeClick}. The rest is on the Button page.
Calendar
No extra props in this demo. The rest is on the Calendar page.
Scroll Area
No extra props in this demo. The rest is on the Scroll Area page.
