Month Picker

Alpha

Presents a calendar view tailored for selecting months.

View code

2024

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

Month Picker, 2024

Features

Full keyboard navigation
Can be controlled or uncontrolled
Focus is fully managed
Localization support
Highly composable

Preface

The component depends on the @internationalized/date package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

Installation

Install the date package.

$ npm add @internationalized/date

Install the component from your command line.

$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  MonthPickerCell,
  MonthPickerCellTrigger,
  MonthPickerGrid,
  MonthPickerGridBody,
  MonthPickerGridRow,
  MonthPickerHeader,
  MonthPickerHeading,
  MonthPickerNext,
  MonthPickerPrev,
  MonthPickerRoot,
} from 'reka-ui'
</script>

<template>
  <MonthPickerRoot>
    <MonthPickerHeader>
      <MonthPickerPrev />
      <MonthPickerHeading />
      <MonthPickerNext />
    </MonthPickerHeader>
    <MonthPickerGrid>
      <MonthPickerGridBody>
        <MonthPickerGridRow>
          <MonthPickerCell>
            <MonthPickerCellTrigger />
          </MonthPickerCell>
        </MonthPickerGridRow>
      </MonthPickerGridBody>
    </MonthPickerGrid>
  </MonthPickerRoot>
</template>

API Reference

Root

Contains all the parts of a month picker

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`calendarLabel`		`string` The accessible label for the month picker
`defaultPlaceholder`		`DateValue` The default placeholder date
`defaultValue`		`DateValue` The default value for the month picker
`dir`		`'ltr' \| 'rtl'` The reading direction of the calendar when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR.
`disabled`	`false`	`boolean` Whether the month picker is disabled
`initialFocus`	`false`	`boolean` If true, the month picker will focus the selected month, today, or the first month of the year on mount
`isMonthDisabled`		`Matcher` A function that returns whether or not a month is disabled
`isMonthUnavailable`		`Matcher` A function that returns whether or not a month is unavailable
`locale`		`string` The locale to use for formatting dates
`maxValue`		`DateValue` The maximum date that can be selected
`minValue`		`DateValue` The minimum date that can be selected
`modelValue`		`DateValue \| DateValue[]` The controlled checked state of the month picker
`multiple`	`false`	`boolean` Whether multiple months can be selected
`nextPage`		`((placeholder: DateValue) => DateValue)` A function that returns the next page of the month picker. Receives the current placeholder as an argument.
`placeholder`		`DateValue` The placeholder date, which is used to determine what year to display when no date is selected
`preventDeselect`	`false`	`boolean` Whether or not to prevent the user from deselecting a date without selecting another date first
`prevPage`		`((placeholder: DateValue) => DateValue)` A function that returns the previous page of the month picker. Receives the current placeholder as an argument.
`readonly`	`false`	`boolean` Whether the month picker is readonly

Emit	Payload
`update:modelValue`	`[date: DateValue]` Event handler called whenever the model value changes
`update:placeholder`	`[date: DateValue]` Event handler called whenever the placeholder value changes

Slots (default)	Payload
`date`	`DateValue` The current date of the placeholder
`grid`	`Grid<DateValue>` The grid of months
`locale`	`string` The month picker locale
`modelValue`	`DateValue \| DateValue[] \| undefined` The current selected value

Methods	Type
`isMonthDisabled`	`Matcher` A function that returns whether or not a month is disabled
`isMonthUnavailable`	`Matcher` A function that returns whether or not a month is unavailable

Data Attribute	Value
`[data-readonly]`	Present when readonly
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid

Contains the navigation buttons and the heading segments.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Prev Button

Calendar navigation button. It navigates the calendar one year in the past.

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`prevPage`		`((placeholder: DateValue) => DateValue)` The function to be used for the prev page. Overwrites the `prevPage` function set on the `MonthPickerRoot`.

Slots (default)	Payload
`disabled`	`boolean` Current disable state

Data Attribute	Value
`[data-disabled]`	Present when disabled

Next Button

Calendar navigation button. It navigates the calendar one year in the future.

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`nextPage`		`((placeholder: DateValue) => DateValue)` The function to be used for the next page. Overwrites the `nextPage` function set on the `MonthPickerRoot`.

Slots (default)	Payload
`disabled`	`boolean` Current disable state

Data Attribute	Value
`[data-disabled]`	Present when disabled

Heading

Heading for displaying the current year.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Slots (default)	Payload
`headingValue`	`string` Current year heading

Data Attribute	Value
`[data-disabled]`	Present when disabled

Grid

Container for wrapping the month picker grid.

Prop	Default	Type
`as`	`'table'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-readonly]`	Present when readonly
`[data-disabled]`	Present when disabled

Grid Body

Container for wrapping the grid body.

Prop	Default	Type
`as`	`'tbody'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Grid Row

Container for wrapping the grid row.

Prop	Default	Type
`as`	`'tr'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Cell

Container for wrapping the month picker cells.

Prop	Default	Type
`as`	`'td'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`date*`		`DateValue` The date value for the cell

Data Attribute	Value
`[data-disabled]`	Present when disabled

Cell Trigger

Interactable container for displaying the cell months. Clicking it selects the month.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`month*`		`DateValue` The date value provided to the cell trigger

Slots (default)	Payload
`monthValue`	`string` Current month value (short name)
`disabled`	`boolean` Current disable state
`selected`	`boolean` Current selected state
`today`	`boolean` Current month/year is today state
`unavailable`	`boolean` Current unavailable state

Data Attribute	Value
`[data-selected]`	Present when selected
`[data-value]`	The ISO string value of the date.
`[data-disabled]`	Present when disabled
`[data-unavailable]`	Present when unavailable
`[data-today]`	Present when the month is the current month
`[data-focused]`	Present when focused

Accessibility

Keyboard Interactions

Key	Description
`Tab`	When focus moves onto the month picker, focuses the first navigation button.
`Space`	When the focus is on either `MonthPickerNext` or `MonthPickerPrev`, it navigates the calendar. Otherwise, it selects the month.
`Enter`	When the focus is on either `MonthPickerNext` or `MonthPickerPrev`, it navigates the calendar. Otherwise, it selects the month.
`ArrowLeftArrowRightArrowUpArrowDown`	When the focus is on `MonthPickerCellTrigger`, it navigates the months, changing the year if necessary.
`PageUp`	When the focus is on `MonthPickerCellTrigger`, it navigates to the same month in the previous year.
`PageDown`	When the focus is on `MonthPickerCellTrigger`, it navigates to the same month in the next year.

Month Picker ​

Features ​

Preface ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Header ​

Prev Button ​

Next Button ​

Heading ​

Grid ​

Grid Body ​

Grid Row ​

Cell ​

Cell Trigger ​

Accessibility ​

Keyboard Interactions ​