Month Range Picker

MonthRangePicker selects inclusive ranges at month precision. First activation sets an anchor; hover or keyboard focus previews a pending range; second activation commits normalized start and end values.

Use Month Range Picker for ranges that do not need day precision. It shares Month Picker's DOM and styling hooks.

Anatomy

• #previous: Previous-year control content.
• #heading: Current year heading.
• #next: Next-year control content.
• #month: Month content with endpoint, in-range, highlighted, and availability state.
• #footer: Optional content after the grid.

Usage

<script setup lang="ts">
import type { CalendarDateRange, CalendarDateValue } from "akaza-ui";
import { CalendarDate } from "@internationalized/date";
import { shallowRef } from "vue";
import { MonthRangePicker } from "akaza-ui";

const range = shallowRef<CalendarDateRange>({});
const page = shallowRef<CalendarDateValue>(new CalendarDate(2026, 1, 1));
</script>

<template>
  <MonthRangePicker v-model="range" v-model:placeholder="page" />
</template>

Examples

Maximum range length

maximumMonths counts both endpoints. A value of 3 accepts March through May but rejects March through June.

<MonthRangePicker v-model="range" :maximum-months="3" />

Fixed endpoint

Keep one boundary stable while users choose the other. The fixed boundary must already exist in the model.

<MonthRangePicker v-model="range" fixed-date="start" />

Non-contiguous ranges

Ranges containing blocked interior months are rejected by default. allowNonContiguousRanges permits blocked interior months while keeping both endpoints selectable.

<MonthRangePicker
  v-model="range"
  allow-non-contiguous-ranges
  :is-month-unavailable="isClosedMonth"
/>

Application constraints

Hard boundaries also disable paging when no month on the target page can be selected.

<MonthRangePicker
  :min-value="new CalendarDate(2026, 3, 1)"
  :max-value="new CalendarDate(2027, 6, 1)"
/>

Calendar-aware pages

Year-sized month pages use calendar-year arithmetic, including leap-month years. Labels follow the value calendar and locale rather than assuming Gregorian dates.

API Reference

Models

Props

Emits

Slots

Methods

UI Options

Styling Hooks

Keyboard

Pointer hover previews a pending range; touch activation selects endpoints without relying on hover.