Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Date Picker examples · Standard

Date Picker with Month and Year Selector for React

A date picker with month and year dropdowns in place of the previous and next arrows.

Framework
UI library

A Date Picker whose header is two dropdowns, month and year, instead of arrows. Jump straight to March 1998 or December 2030 without paging month by month. Use it for birthdays, expiry dates and any date far from today.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

What does the button say?

The selected date in long form, or Pick a date when nothing is selected. The button prints the value itself, formatted with Intl.DateTimeFormat, so the text needs no date library.

Can I change the month from the keyboard?

Yes. Tab reaches each select and the arrow keys change it, as with any native select. In the days, Page Up and Page Down move a month.

All 8 date picker examples