Registry / web-framework / vue-monthly-picker

vue-monthly-picker

library0.2.8jsnpmunverified

Vue Monthly Picker (current version 0.2.8) is a specialized Vue 2 component designed for selecting a specific month and year. It relies on Moment.js for all underlying date manipulation and formatting, specifically requiring Moment.js version ^2.18.1. The package maintains a slow and sporadic release cadence, with recent updates focusing on minor feature enhancements like `clearOption`, `alignment`, and `selectedBackgroundColor` props. Its core functionality offers a simple, dedicated user interface for month-only selection, differentiating it from full date pickers. Key features include customizable month labels, min/max date constraints, and flexible display formatting. This component is suitable for projects firmly established on Vue 2 and Moment.js, but users should be aware of the legacy status of its core dependencies.

web-framework

npm install vue-monthly-picker

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-MONTHLY-PICKER

vue-monthly-picker

web-frameworkjavascriptv0.2.8

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.

VueMonthlyPicker

✓ import VueMonthlyPicker from 'vue-monthly-picker'

✗ const VueMonthlyPicker = require('vue-monthly-picker')

The component is intended for use in an ES module environment with Vue's component registration.

Vue.component registration

✓ Vue.component('monthly-picker', VueMonthlyPicker);

Alternatively, you can register it locally within a component's `components` option.

Moment object for v-model

✓ data() { return { selectedMonth: moment() } }

`v-model` expects a Moment.js object for its bound value, not a native Date object or string. Ensure Moment.js is imported and used to initialize the value.

This quickstart demonstrates how to register and use `vue-monthly-picker` globally, binding a Moment.js object with `v-model` and setting min/max selectable dates.

import Vue from 'vue'; import VueMonthlyPicker from 'vue-monthly-picker'; import moment from 'moment'; Vue.component('my-monthly-picker', VueMonthlyPicker); new Vue({ el: '#app', data() { return { selectedMonth: moment(), // Initialize with a moment object minDate: moment().subtract(1, 'year'), maxDate: moment().add(1, 'year') } }, template: ` <div id="app"> <p>Selected Month: {{ selectedMonth ? selectedMonth.format('YYYY-MM') : 'None' }}</p> <my-monthly-picker v-model="selectedMonth" :min="minDate" :max="maxDate" placeHolder="Select a month..." :clearOption="true" dateFormat="MMMM YYYY" /> <p>Choose a month from the picker above.</p> </div> ` });

Debug

Known issues

deprecatedThis package is built for Vue 2, which has reached its End of Life (EOL) for regular support and is now in maintenance. It is not compatible with Vue 3.

fix

For new projects or migrations to Vue 3, consider alternatives like `vue-month-picker` (v2.0.0 for Vue 3), `Vue Datepicker` (from @vuepic/vue-datepicker), or `vue3-datepicker` which are designed for Vue 3 and often use more modern date libraries like `date-fns`.

affects: all

deprecatedThe component relies heavily on Moment.js, a legacy project that is no longer under active development. While widely used, Moment.js can contribute significantly to bundle size and is generally discouraged for new JavaScript projects in favor of modern alternatives like Luxon, `date-fns`, or native `Intl` APIs.

fix

If starting a new project, evaluate date libraries that are tree-shakeable and actively maintained. For existing projects, be aware of potential bundle size implications and consider migrating if performance becomes a concern. Refer to Moment.js documentation for migration guides if needed.

affects: all

gotchaThe `v-model` binding and the `value`, `min`, `max` props require a Moment.js object. Passing a native JavaScript `Date` object or a date string will lead to unexpected behavior or errors.

fix

Always ensure that values bound to `v-model` and provided to `min` or `max` props are valid Moment.js objects. Initialize with `moment()` or `moment('YYYY-MM-DD')`.

affects: all

gotchaMoment.js can sometimes emit deprecation warnings, especially when parsing non-standard date strings or when its internal fallback mechanisms are triggered.

fix

To avoid Moment.js deprecation warnings, always pass explicitly formatted strings (e.g., ISO 8601) or a `Date` object to `moment()` constructor when applicable. You might also set `moment.suppressDeprecationWarnings = true;` if warnings are known and acceptable, but this is generally not recommended for debugging purposes.

affects: all

Errors

Common errors & fixes

[antdv:DatePicker] value provides invalidate moment time, if you want to set empty value, use null instead.

The `v-model` or `value` prop was initialized or updated with an invalid or non-Moment.js date object.

fix

Ensure the bound `v-model` or `value` prop is always a valid Moment.js object, or `null` for an empty state. For example, `moment('2023-01', 'YYYY-MM')` or `moment()`.

TypeError: Cannot read properties of undefined (reading '$moment') / 'moment is not a function'

Moment.js is not correctly imported, globally available, or passed to the component, or the component is used in a Vue 3 context.

fix

Verify that Moment.js is installed (`npm install moment`) and correctly imported where `VueMonthlyPicker` is used or globally (`import moment from 'moment';`). Ensure the project is running Vue 2.x.

Error in render: 'v-model' directives cannot update the value of a non-form control type input. Did you mean to use a two-way data binding on a component prop?

This error is unlikely with `vue-monthly-picker` as it explicitly supports `v-model`. However, it can occur if Vue's `v-model` is incorrectly applied to a raw HTML element that doesn't natively support it, or if there's a misconfiguration in how the component's `value` prop and `input` event (or equivalent) are handled internally, or if trying to use Vue 3's `v-model` behavior on a Vue 2 component.

fix

Ensure `v-model` is correctly implemented by the component (which `vue-monthly-picker` does). If you encounter this, double-check your Vue version and component setup. It might also be a symptom of trying to use a Vue 2 component in a Vue 3 project.

Upgrade

Version history

0.2.8latest on npm

Audit

Dependencies

momentrequiredRequired for all date handling and `v-model` binding. Moment.js is a peer dependency.

vuerequiredThe component is built for Vue 2.x environments.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ittus/vue-monthly-picker ↗

packagehttps://www.npmjs.com/package/vue-monthly-picker ↗