Skip to main content


A static month selector built to compliment the Calendar component when building date picking components. This component is stateless and only provides an unstyled UI for selecting a month.


Since this component is stateless, you need to provide a stateful component to handle the selected month. You can use the useState hook to achieve this.

import React from 'react';
import { MonthSelector } from 'calendar-widgets';

const CustomField = ({ monthIndex }) => (
width: '100%',
marginBottom: '12px',
padding: '6px',
{new Date(2000, monthIndex - 1).toLocaleDateString('en', { month: 'long' })}

const App = () => {
const [month, setMonth] = useState(1);
const userPreferredLang = 'en';

return (
<span>Current selected index: {month}</span>

width: '200px',
padding: '12px',
paddingBottom: '0',
maxHeight: '300px',
overflowY: 'auto'

customField (optional)

Used to extend the default month field. This is a function that renders the content for each month. The function receives an object with the properties monthIndex and lang.

Default value: JSX.Element

type CustomFieldProps = (props: { monthIndex: number; lang: string; }) => React.ReactNode;

lang (optional)

The language used for formatting the month name.

Default value: 'en';

type lang: string;

style (optional)

This is an object containing custom styles to be applied to the component container.

Default value: {}

type style: React.CSSProperties;

className (optional)

This is a custom class name to be applied to the component container.

Default value: ''

type className: string;