Back to Vuetify

Month pickers

packages/docs/src/pages/en/components/month-pickers.md

4.1.81.9 KB
Original Source

Month pickers

The v-month-picker component is a standalone picker that allows users to select a month and year combination.

<page-features />

::: warning

This feature requires v4.1.0

:::

Installation

Labs components require manual import and registration with the Vuetify instance.

js
import { VMonthPicker } from 'vuetify/labs/VMonthPicker'

Usage

At its core, the month picker allows selecting a specific month and year. The model value is a string in YYYY-MM format.

<ExamplesUsage name="v-month-picker" /> <PromotedEntry />

API

ComponentDescription
v-month-pickerPrimary Component
v-date-picker-yearsSub-component used to display years
<ApiInline hide-links />

Guide

The v-month-picker component is built on top of v-picker and reuses internal date picker sub-components for rendering month and year views.

Props

Allowed months

The allowed-months prop restricts which months can be selected. It accepts an array of month numbers (0-11) or a function that returns a boolean.

<ExamplesExample file="v-month-picker/prop-allowed-months" />

Multiple and range

The multiple prop enables selecting more than one month. Set it to true for arbitrary multi-select or 'range' for range selection where the first and last clicks define the range boundaries. In range mode, the months between the endpoints receive a tinted background.

<ExamplesExample file="v-month-picker/prop-multiple-range" />

Min and max

The min and max props restrict the selectable range. Both accept strings in YYYY-MM format.

<ExamplesExample file="v-month-picker/prop-min-max" />

Misc

Dialog and menu

The month picker can be integrated into a v-menu or v-dialog, allowing users to pick a month from a text field activator.

<ExamplesExample file="v-month-picker/misc-dialog-and-menu" />