MonthPicker

Language:

Default

With Month Navigation

Constrained Range (2024-01 to 2027-06)

Only months between January 2024 and June 2027 are selectable.

Small Size

Disabled

MonthPicker

A year/month picker with popover. The user selects a year from a dropdown and a month from a button grid.

Usage

import { MonthPicker } from "@/components/ui/month-picker"

<MonthPicker
  value={value}
  onChange={setValue}
/>

// With month navigation arrows
<MonthPicker
  value={value}
  onChange={setValue}
  enableMonthNavigation
/>

// Constrained range
<MonthPicker
  value={value}
  onChange={setValue}
  minDate={{ year: 2020, month: 0 }}
  maxDate={{ year: 2030, month: 11 }}
/>

Props

Prop	Type	Default	Description
value	{ year: number; month: number } \| undefined	—	Selected value. month is 0-indexed (0 = January, 11 = December).
onChange	(value: { year: number; month: number } \| undefined) => void	—	Called when a month is selected.
enableMonthNavigation	boolean	false	Adds < > buttons beside the trigger to step one month forward or backward.
placeholder	string	—	Custom placeholder text. Defaults to a localized string.
disabled	boolean	false	Disables the trigger button.
language	"en" \| "pt"	"en"	Locale for labels and month names.
size	"default" \| "sm"	"default"	Trigger size variant.
shadow	"none" \| "xs" \| "sm"	"xs"	Shadow on the trigger button.
minDate	{ year: number; month: number }	—	Earliest selectable year/month. Defaults to 100 years before the current year.
maxDate	{ year: number; month: number }	—	Latest selectable year/month. Defaults to 10 years after the current year.
triggerClassName	string	—	Additional classes for the trigger button.
className	string	—	Additional classes for the popover content.