MonthPicker · YearPicker

MonthPicker and YearPicker pick a month or a year, with the same field and keyboard as DatePicker.

The popover shows a grid of the 12 months of a year (MonthPicker) or 12 years (YearPicker). The keyboard works like the day calendar: arrows move, Home / End go to the start / end of the row, PageUp / PageDown go to the previous / next year (or 12 years), Enter picks; opening the popover focuses the selected cell. The value is a Date: the 1st of the month, or January 1 of the year. minDate / maxDate dim cells out of range. Shown in the YugenProvider locale ("November 2026" in en-US); change it with formatDate.

Card expiry

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { MonthPicker, YearPicker } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Graduation year

Year 2020

YearPicker

maxDate is this year; clearable adds a clear button.

Report month

Report month, size & disabled

Same sizes and states as DatePicker.

Usage

Use MonthPicker when the day doesn't matter (card expiry, reporting period, pay month).
Set minDate / maxDate instead of checking after selection.

Don't

Don't use YearPicker for a birth year across many decades if typing is faster; a number field may fit better.
Don't read the day (getDate) of the value; it is always the 1st.

Props

Prop · Type	Default	Description
value / defaultValueDate \| null	Default: —	Selected month (the 1st) or year (January 1).
onValueChange(date: Date \| null) => void	Default: —	Called when a value is picked or cleared; null when cleared.
minDate / maxDateDate	Default: —	Earliest and latest month / year that can be picked.
formatDate(date: Date) => string	Default: —	Display format; defaults to month + year (MonthPicker) or year (YearPicker) in the locale.
placeholderstring	Default: "Select a month…" / "Select a year…"	Text when nothing is selected.
clearableboolean	Default: false	Shows a clear button when there is a value.
size"small" \| "medium" \| "large"	Default: "medium"	Height 24 / 32 / 40px.
disabled / required / id / aria-*—	Default: —	Passed by Field when wrapped in <Field>.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.monthPicker

Key · Type	Default (English)	messagesVi
placeholderstring Placeholder khi chưa chọn tháng.	Default (English)`"Select a month…"`	messagesVi`"Chọn tháng…"`
clearstring aria-label nút xoá giá trị (`clearable`).	Default (English)`"Clear"`	messagesVi`"Xoá giá trị"`
previousYearstring aria-label nút sang năm trước / năm sau.	Default (English)`"Previous year"`	messagesVi`"Năm trước"`
nextYearstring	Default (English)`"Next year"`	messagesVi`"Năm sau"`

messages.yearPicker

Key · Type	Default (English)	messagesVi
placeholderstring Placeholder khi chưa chọn năm.	Default (English)`"Select a year…"`	messagesVi`"Chọn năm…"`
clearstring aria-label nút xoá giá trị (`clearable`).	Default (English)`"Clear"`	messagesVi`"Xoá giá trị"`
previousYearsstring aria-label nút sang 12 năm trước / sau.	Default (English)`"Earlier years"`	messagesVi`"Các năm trước"`
nextYearsstring	Default (English)`"Later years"`	messagesVi`"Các năm sau"`