Month Range Picker

Alpha

Presents a calendar view tailored for selecting month ranges.

View code

Month Picker, 2024

2024

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

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 {
  MonthRangePickerCell,
  MonthRangePickerCellTrigger,
  MonthRangePickerGrid,
  MonthRangePickerGridBody,
  MonthRangePickerGridRow,
  MonthRangePickerHeader,
  MonthRangePickerHeading,
  MonthRangePickerNext,
  MonthRangePickerPrev,
  MonthRangePickerRoot,
} from 'reka-ui'
</script>

<template>
  <MonthRangePickerRoot>
    <MonthRangePickerHeader>
      <MonthRangePickerPrev />
      <MonthRangePickerHeading />
      <MonthRangePickerNext />
    </MonthRangePickerHeader>
    <MonthRangePickerGrid>
      <MonthRangePickerGridBody>
        <MonthRangePickerGridRow>
          <MonthRangePickerCell>
            <MonthRangePickerCellTrigger />
          </MonthRangePickerCell>
        </MonthRangePickerGridRow>
      </MonthRangePickerGridBody>
    </MonthRangePickerGrid>
  </MonthRangePickerRoot>
</template>

API Reference

Root

Contains all the parts of a month range picker

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.

Prev Button

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

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

Next Button

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

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

Heading

Heading for displaying the current year.

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

Grid

Container for wrapping the month range picker grid.

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

Grid Body

Container for wrapping the grid body.

Grid Row

Container for wrapping the grid row.

Cell

Container for wrapping the month range picker cells.

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

Cell Trigger

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

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-selection-start]`	Present when the month is the start of the selection.
`[data-selection-end]`	Present when the month is the end of the selection.
`[data-highlighted]`	Present when the month is highlighted by the user as they select a range.
`[data-highlighted-start]`	Present when the month is the start of the range that is highlighted by the user.
`[data-highlighted-end]`	Present when the month is the end of the range that is highlighted by the user.
`[data-focused]`	Present when focused

Accessibility

Keyboard Interactions

Key	Description
`Tab`	When focus moves onto the month range picker, focuses the first navigation button.
`Space`	When the focus is on either `MonthRangePickerNext` or `MonthRangePickerPrev`, it navigates the calendar. Otherwise, it selects the month.
`Enter`	When the focus is on either `MonthRangePickerNext` or `MonthRangePickerPrev`, it navigates the calendar. Otherwise, it selects the month.
`ArrowLeftArrowRightArrowUpArrowDown`	When the focus is on `MonthRangePickerCellTrigger`, it navigates the months, changing the year if necessary.
`PageUp`	When the focus is on `MonthRangePickerCellTrigger`, it navigates to the same month in the previous year.
`PageDown`	When the focus is on `MonthRangePickerCellTrigger`, it navigates to the same month in the next year.
`Escape`	Cancels the current range selection and restores the previous valid range.

Month Range 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 ​