shadcn.io is an independent project built on shadcn/ui
The button shows a calendar icon and today's date. The calendar header is a month dropdown and a year dropdown, not previous and next arrows.
Use month and year dropdowns when people jump far from this month, such as a birthday. Arrows on a Calendar are enough for dates near today. Ark UI in Vue does not know the birth year.
Installation
Anatomy
FAQ
Which parts make the header?
The month select and the year select, side by side in the view control with gap-2; the month one grows to fill the row. They're native select elements that ship with the date picker.
Do the dropdowns follow the calendar?
Yes. They read and set the month on view, so they always match the month shown. Changing one doesn't change the selected date.
Which years are in the list?
The date picker's default range around today. Set min and max on DatePicker to bound it, such as 1900 to this year for a birth date.
Can I keep the previous and next arrows?
Yes. Put the previous trigger before the selects and the next trigger after them, as the date picker's own default header does.
