Registry / web-framework / vue-month-picker

vue-month-picker

JSON →
library2.0.0jsnpmunverified

vue-month-picker is a lightweight, dependency-free month picker component designed specifically for Vue 3 applications. Currently at version 2.0.0, it offers robust functionality for selecting single months or month ranges without external dependencies, making it a highly performant choice. The library features full TypeScript support, leveraging Vue's Composition API and `<script setup>` syntax for modern Vue development. Key capabilities include inline and input-driven picker modes, date constraints (`minDate`, `maxDate`), customizable date formatting, a dark theme option, year-only selection, and extensive internationalization with over 45 built-in languages. Its focus on Vue 3 and zero dependencies differentiates it from more general-purpose date pickers.

web-framework
npm install vue-month-picker
package ↗
INSTALL
IMPORT
SIG · VUE-MONTH-PICKER
V
vue-month-picker
web-frameworkjavascriptv2.0.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

MonthPicker
✓ import { MonthPicker } from 'vue-month-picker'
✗ import MonthPicker from 'vue-month-picker'
This is a named export for the primary inline month picker component.
MonthPickerInput
✓ import { MonthPickerInput } from 'vue-month-picker'
✗ import MonthPickerInput from 'vue-month-picker'
This is a named export for the input-field version of the month picker.
IDateResult
✓ import type { IDateResult } from 'vue-month-picker'
✗ import { IDateResult } from 'vue-month-picker'
Use `import type` for type-only imports to ensure they are stripped during compilation and for clarity.
VueMonthPicker (Plugin)
✓ import VueMonthPicker from 'vue-month-picker'
✗ import { VueMonthPicker } from 'vue-month-picker'
This is the default export, typically used for global plugin registration via `app.use()`.

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>
Debug
Known issues
breakingThis 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.
affects: >=2.0.0
gotchaWhen 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.
affects: >=2.0.0
gotchaCombining 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.
affects: >=2.0.0
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: MonthPicker
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')
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.
Upgrade
Version history
2.0.0latest on npm
Audit
Dependencies
vuerequiredRuntime peer dependency for Vue 3 component.
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
packagehttps://www.npmjs.com/package/vue-month-picker ↗
vue-month-picker — npm install vue-month-picker · libregistry