Vue Month Picker

Common errors

• [Vue warn]: Failed to resolve component: MonthPicker

  cause The component was not properly imported or registered in the Vue application's component options or setup context.
  fix Ensure you have either imported the component locally (e.g., `import { MonthPicker } from 'vue-month-picker'`) and added it to your component's `components` option (or `<script setup>`), or globally registered the plugin (`app.use(VueMonthPicker)`).

• TypeError: Cannot read properties of undefined (reading 'month')

  cause Attempting to access properties of the date result object (e.g., `date.month`) when no month has been selected, and the variable is still `null` or `undefined`.
  fix Add conditional rendering or null checks before accessing properties of the date object returned by the component (e.g., `<p v-if="date">{{ date.month }}</p>`). This is especially relevant when using the `no-default` prop.

Warnings

• breaking This library is exclusively designed for Vue 3 applications. Attempting to use it in a Vue 2 project will lead to compatibility errors and runtime failures.
  Fix: Ensure your project is using Vue 3 (version 3.0.0 or higher). For Vue 2 projects, seek alternative month picker libraries or upgrade your Vue version.
• gotcha When defining 'minDate' or 'maxDate' props, ensure you provide a valid JavaScript Date object. Remember that JavaScript Date constructor months are 0-indexed (January is 0), while 'default-month' prop expects a 1-indexed month (January is 1).
  Fix: When creating Date objects for `minDate`/`maxDate`, subtract 1 from the month number (e.g., `new Date(2024, 0, 1)` for January). For `default-month`, use the standard 1-12 month number.
• gotcha Combining the 'no-default' prop with 'default-month' or 'default-year' can lead to unexpected behavior. 'no-default' explicitly prevents any initial selection.
  Fix: To start with no selection, use only 'no-default'. To provide an initial selection, omit 'no-default' and set 'default-month' and 'default-year' as desired.

Install

• npm install vue-month-picker npm
• yarn add vue-month-picker yarn
• pnpm add vue-month-picker pnpm

Imports

• MonthPicker
  wrong:

  import MonthPicker from 'vue-month-picker'

  correct:

  import { MonthPicker } from 'vue-month-picker'

  This is a named export for the primary inline month picker component.
• MonthPickerInput
  wrong:

  import MonthPickerInput from 'vue-month-picker'

  correct:

  import { MonthPickerInput } from 'vue-month-picker'

  This is a named export for the input-field version of the month picker.
• IDateResult
  wrong:

  import { IDateResult } from 'vue-month-picker'

  correct:

  import type { IDateResult } from 'vue-month-picker'

  Use `import type` for type-only imports to ensure they are stripped during compilation and for clarity.
• VueMonthPicker (Plugin)
  wrong:

  import { VueMonthPicker } from 'vue-month-picker'

  correct:

  import VueMonthPicker from 'vue-month-picker'

  This is the default export, typically used for global plugin registration via `app.use()`.

Quickstart

Demonstrates local component registration for both inline and input-driven month pickers, including basic usage with event handling and range selection.

<script setup lang="ts">
import { MonthPicker, MonthPickerInput } from 'vue-month-picker'
import type { IDateResult } from 'vue-month-picker'

const onDateChange = (date: IDateResult) => {
  console.log('Selected Month:', date.month, 'Year:', date.year)
}

const onRangeChange = (dateRange: { month: number; year: number }[]) => {
  console.log('Selected Range:', dateRange)
}
</script>

<template>
  <h3>Inline Month Picker</h3>
  <MonthPicker @change="onDateChange" />

  <h3>Input Month Picker</h3>
  <MonthPickerInput
    :no-default="true"
    date-format="%n %Y"
    placeholder="Select a month"
    @change="onDateChange"
  />

  <h3>Range Selection Picker</h3>
  <MonthPicker
    :range="true"
    :no-default="true"
    @change="onRangeChange"
  />
</template>