shadcn.io is an independent project built on shadcn/ui
Select Date opens a dialog with that title. The caption is a month dropdown and a year dropdown. There are no previous or next arrows.
Use it when a far date should be picked without paging month by month. Leave the grid on the page if people live in it. A Date Picker hides the same caption in a field. In Svelte, Ark UI does not remember which year you wanted.
Installation
Anatomy
Usage
<Dialog><DialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Select Date</Button>{/snippet}</DialogTrigger><DialogContent class="sm:max-w-fit"><DialogHeader><DialogTitle>Select Date</DialogTitle></DialogHeader><Calendar class="rounded-md border" focusedValue={focusedValue} onFocusChange={handleFocusChange} onValueChange={handleValueChange} value={value}><CalendarViewControl class="gap-2"><Select class="flex-1" collection={monthCollection} onValueChange={handleMonthChange} value={[String(focusedValue.month)]}><SelectTrigger aria-label="Month" class="w-full"><SelectValue /></SelectTrigger><SelectContent><SelectGroup>{#each monthCollection.items as item (item.value)}<SelectItem item={item}>{item.label}</SelectItem>{/each}</SelectGroup></SelectContent></Select><Select class="shrink-0" collection={yearCollection} onValueChange={handleYearChange} value={[String(focusedValue.year)]}><SelectTrigger aria-label="Year"><SelectValue /></SelectTrigger><SelectContent><SelectGroup>{#each yearCollection.items as item (item.value)}<SelectItem item={item}>{item.label}</SelectItem>{/each}</SelectGroup></SelectContent></Select></CalendarViewControl><CalendarTable><CalendarWeekDays /><CalendarTableDays /></CalendarTable></Calendar></DialogContent></Dialog>FAQ
How do the month and year dropdowns work?
The control row is two Selects in CalendarViewControl. The month select calls focusedValue.set({ month }), the year select calls focusedValue.set({ year }), and focusedValue with onFocusChange moves the grid.
Where is the dialog in this file?
DialogTrigger opens DialogContent with sm:max-w-fit. The calendar, including both selects, sits under a DialogTitle that reads Select Date.
How do I read the selected date?
value is a list holding the selected date, and onValueChange receives { value }. This demo starts the list from parseDate(new Date()).
Which years are in the year dropdown?
The year Select lists 101 years, from 100 years ago through the current year. Choosing one calls focusedValue.set({ year }).
API Reference
Dialog
No extra props in this demo. The rest is on the Dialog page.
Button
Sets props and variant="outline". The rest is on the Button page.
Calendar
Sets focusedValue={focusedValue}, onFocusChange={handleFocusChange}, onValueChange={handleValueChange} and value={value}. The rest is on the Calendar page.
Select
Sets collection={monthCollection}, onValueChange={handleMonthChange}, value={[String(focusedValue.month)]}, aria-label="Month", item={item} and collection={yearCollection}. The rest is on the Select page.
