Month Picker

Preview

05/2026

Installation

pnpm add react-datepicker date-fns
npx skeci-ui add month-picker

Usage

import { MonthPicker } from '@/components/ui/month-picker';
import { useState } from 'react';

const [date, setDate] = useState<Date | null>(new Date());

<MonthPicker selected={date} onChange={(date) => setDate(date)} />

Variants

Inline Month Picker

Previous YearNext Year

2026

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Props

Prop	Type	Default	Description
selected	Date | null	—	The selected date.
onChange	(date: Date | null) => void	—	Callback when the date changes.
disabled	boolean	false	Whether the month picker is disabled.
placeholderText	string	'Pick a month'	Placeholder text for the input.
border	'rough' | 'normal'	'rough'	The border style of the input.
inline	boolean	false	Whether to render the month picker inline.