MonthPickerInput

Month, multiple months and months range picker input

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

MonthPicker props

MonthPickerInput supports all props from MonthPicker, read through its documentation to learn about all component features that are not listed on this page.

Usage

Pick date

import { useState } from 'react';
import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <MonthPickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Multiple dates

Set type="multiple" to allow user to pick multiple dates:

Pick dates

import { useState } from 'react';
import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date[]>([]);
  return (
    <MonthPickerInput
      type="multiple"
      label="Pick dates"
      placeholder="Pick dates"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Dates range

Set type="range" to allow user to pick dates range:

Pick dates range

import { useState } from 'react';
import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return (
    <MonthPickerInput
      type="range"
      label="Pick dates range"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Open picker in modal

By default, MonthPicker is rendered inside Popover. You can change that to Modal by setting dropdownType="modal":

Pick date

import { useState } from 'react';
import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <MonthPickerInput
      dropdownType="modal"
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Value format

Use valueFormat prop to change dayjs format of value label:

Pick month

import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <MonthPickerInput
      valueFormat="YYYY MMM"
      type="multiple"
      label="Pick month"
      placeholder="Pick month"
      mx="auto"
      maw={400}
    />
  );
}

Clearable

Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

Pick date

import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <MonthPickerInput
      clearable
      defaultValue={new Date()}
      label="Pick date"
      placeholder="Pick date"
      mx="auto"
      maw={400}
    />
  );
}

Disabled state

Disabled

import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <MonthPickerInput
      valueFormat="YYYY MMM"
      type="multiple"
      label="Disabled"
      placeholder="Pick month"
      disabled
    />
  );
}

Input props

MonthPickerInput supports all props from Input and Input.Wrapper components:

Pick date

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <MonthPickerInput
      placeholder="Pick date"
      label="Pick date"
      withAsterisk
    />
  );
}

With icon

Pick date

import { useState } from 'react';
import { MonthPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <MonthPickerInput
      icon={<IconCalendar size="1.1rem" stroke={1.5} />}
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Accessibility

MonthPicker labels

Follow MonthPicker documentation to add all required labels to the year picker inside popover.

Input label

Set aria-label in case you use component without label:

<MonthPickerInput /> // -> not ok, input is not labeled
<MonthPickerInput label="My input" /> // -> ok, input and label is connected
<MonthPickerInput aria-label="My input" /> // -> ok, label is not visible but will be announced by screen reader

Go back

MonthPicker – @mantine/dates

Up next

TimeInput – @mantine/dates

MonthPickerInput component props

Name	Type	Description
allowDeselect	boolean	Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
allowSingleDateInRange	boolean	Determines whether single year can be selected as range, applicable only when type="range"
ariaLabels	CalendarAriaLabels	aria-label attributes for controls on different levels
clearButtonProps	Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" \| keyof ButtonHTMLAttributes<...>>	Props added to clear button
clearable	boolean	Determines whether input value can be cleared, adds clear button to right section, false by default
closeOnChange	boolean	Determines whether dropdown should be closed when date is selected, not applicable when type="multiple", true by default
columnsToScroll	number	Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns
date	Date	Date that is displayed, used for controlled component
decadeLabelFormat	string \| ((startOfDecade: Date, endOfDecade: Date) => ReactNode)	dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY"
defaultDate	Date	Initial date that is displayed, used for uncontrolled component
defaultLevel	"year" \| "decade"	Initial level displayed to the user (decade, year, month), used for uncontrolled component
defaultValue	Date \| DatesRangeValue \| Date[]	Default value for uncontrolled component
description	ReactNode	Input description, displayed after label
descriptionProps	Record<string, any>	Props spread to description element
disabled	boolean	Disabled input state
dropdownType	"modal" \| "popover"	Type of dropdown, defaults to popover
error	ReactNode	Displays error message after input
errorProps	Record<string, any>	Props spread to error element
getMonthControlProps	(date: Date) => Partial<PickerControlProps>	Adds props to month picker control based on date
getYearControlProps	(date: Date) => Partial<PickerControlProps>	Adds props to year picker control based on date
icon	ReactNode	Adds icon on the left side of input
iconWidth	Width<string \| number>	Width of icon section
inputContainer	(children: ReactNode) => ReactNode	Input container component, defaults to React.Fragment
inputWrapperOrder	("input" \| "label" \| "error" \| "description")[]	Controls order of the Input.Wrapper elements
label	ReactNode	Input label, displayed before input
labelProps	Record<string, any>	Props spread to label element
labelSeparator	string	Separator between range value
level	"year" \| "decade"	Current level displayed to the user (decade, year, month), used for controlled component
locale	string	dayjs locale, defaults to value defined in DatesProvider
maxDate	Date	Maximum possible date
maxLevel	"year" \| "decade"	Max level that user can go up to (decade, year), defaults to decade
minDate	Date	Minimum possible date
modalProps	Partial<Omit<ModalProps, "children">>	Props added to Modal component
monthsListFormat	string	dayjs format for months list
numberOfColumns	number	Number of columns to render next to each other
onChange	(value: DatePickerValue<Type>) => void	Called when value changes
onDateChange	(date: Date) => void	Called when date changes
onLevelChange	(level: MonthPickerLevel) => void	Called when level changes
onNextDecade	(date: Date) => void	Called when next decade button is clicked
onNextYear	(date: Date) => void	Called when next year button is clicked
onPreviousDecade	(date: Date) => void	Called when previous decade button is clicked
onPreviousYear	(date: Date) => void	Called when previous year button is clicked
popoverProps	Partial<Omit<PopoverProps, "children">>	Props added to Popover component
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
readOnly	boolean	Determines whether the user can modify the value
required	boolean	Sets required on input element
rightSection	ReactNode	Right section of input, similar to icon but on the right
rightSectionProps	Record<string, any>	Props spread to rightSection div element
rightSectionWidth	Width<string \| number>	Width of right section, is used to calculate input padding-right
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Input size
sortDates	boolean	Determines whether dates value should be sorted before onChange call, only applicable when type="multiple", true by default
type	"default" \| "multiple" \| "range"	Picker type: range, multiple or default
value	Date \| DatesRangeValue \| Date[]	Value for controlled component
valueFormat	string	Dayjs format to display input value, "MMMM YYYY" by default
variant	Variants<"unstyled" \| "default" \| "filled">	Defines input appearance, defaults to default in light color scheme and filled in dark
withAsterisk	boolean	Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
withCellSpacing	boolean	Determines whether controls should be separated by spacing, true by default
wrapperProps	Record<string, any>	Properties spread to root element
yearLabelFormat	string \| ((year: Date) => ReactNode)	dayjs label format to display year label or a function that returns year label based on year value, defaults to "YYYY"
yearsListFormat	string	dayjs format for years list

MonthPickerInput component Styles API

Name	Static selector	Description
wrapper	.mantine-MonthPickerInput-wrapper	Root Input element
icon	.mantine-MonthPickerInput-icon	Input icon wrapper on the left side of the input, controlled by icon prop
input	.mantine-MonthPickerInput-input	Main input element
rightSection	.mantine-MonthPickerInput-rightSection	Input right section, controlled by rightSection prop
root	.mantine-MonthPickerInput-root	Root element
label	.mantine-MonthPickerInput-label	Label element styles, defined by label prop
error	.mantine-MonthPickerInput-error	Error element styles, defined by error prop
description	.mantine-MonthPickerInput-description	Description element styles, defined by description prop
required	.mantine-MonthPickerInput-required	Required asterisk element styles, defined by required prop
calendar	.mantine-MonthPickerInput-calendar	Calendar root element
calendarHeader	.mantine-MonthPickerInput-calendarHeader	Calendar header root element
calendarHeaderControl	.mantine-MonthPickerInput-calendarHeaderControl	Previous/next calendar header controls
calendarHeaderControlIcon	.mantine-MonthPickerInput-calendarHeaderControlIcon	Icon of previous/next calendar header controls
calendarHeaderLevel	.mantine-MonthPickerInput-calendarHeaderLevel	Level control (changes levels when clicked, month -> year -> decade)
decadeLevelGroup	.mantine-MonthPickerInput-decadeLevelGroup	Group of decades levels
decadeLevel	.mantine-MonthPickerInput-decadeLevel	Decade level root element
pickerControl	.mantine-MonthPickerInput-pickerControl	Button used to pick months and years
yearsList	.mantine-MonthPickerInput-yearsList	Years list table element
yearsListRow	.mantine-MonthPickerInput-yearsListRow	Years list row element
yearsListCell	.mantine-MonthPickerInput-yearsListCell	Years list cell element
yearLevelGroup	.mantine-MonthPickerInput-yearLevelGroup	Group of year levels
yearLevel	.mantine-MonthPickerInput-yearLevel	Year level root element
monthsList	.mantine-MonthPickerInput-monthsList	Months list table element
monthsListRow	.mantine-MonthPickerInput-monthsListRow	Months list table row element
monthsListCell	.mantine-MonthPickerInput-monthsListCell	Months list table cell element

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter