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 React, Base UI does not remember which year you wanted.
Installation
Anatomy
Usage
<Calendar
captionLayout="dropdown"
className="rounded-md border"
components={components}
hideNavigation
mode="single"
month={month}
onMonthChange={setMonth}
onSelect={setDate}
selected={date}
/>FAQ
How do the month and year dropdowns work?
captionLayout="dropdown" and hideNavigation replace the previous and next buttons with month and year dropdowns. components.Dropdown renders each as a Select, and month with onMonthChange tracks the visible month apart from selected.
Where is the dialog in this file?
CalendarDropdown returns a Dialog whose content is the month or year Select. The Calendar itself stays on the page, with captionLayout="dropdown" and hideNavigation.
How do I read the selected date?
mode="single" makes selected one date and onSelect the setter. This demo stores that date in state, starting from new Date().
Which years are in the year dropdown?
The year Select lists the options the calendar passes into Dropdown. A SelectItem sets disabled from option.disabled, so a year the calendar turns off stays disabled.
API Reference
Calendar
Sets captionLayout="dropdown", components={components}, hideNavigation, mode="single", month={month} and onMonthChange={setMonth}. The rest is on the Calendar page.
