{"id":12532,"library":"vue-monthly-picker","title":"Vue Monthly Picker Component","description":"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.","status":"maintenance","version":"0.2.8","language":"javascript","source_language":"en","source_url":"https://github.com/ittus/vue-monthly-picker","tags":["javascript","month-select","month-option","monthpicker","month-picker","vue-component","vuejs"],"install":[{"cmd":"npm install vue-monthly-picker","lang":"bash","label":"npm"},{"cmd":"yarn add vue-monthly-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-monthly-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for all date handling and `v-model` binding. Moment.js is a peer dependency.","package":"moment","optional":false},{"reason":"The component is built for Vue 2.x environments.","package":"vue","optional":false}],"imports":[{"note":"The component is intended for use in an ES module environment with Vue's component registration.","wrong":"const VueMonthlyPicker = require('vue-monthly-picker')","symbol":"VueMonthlyPicker","correct":"import VueMonthlyPicker from 'vue-monthly-picker'"},{"note":"Alternatively, you can register it locally within a component's `components` option.","symbol":"Vue.component registration","correct":"Vue.component('monthly-picker', VueMonthlyPicker);"},{"note":"`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.","symbol":"Moment object for v-model","correct":"data() { return { selectedMonth: moment() } }"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueMonthlyPicker from 'vue-monthly-picker';\nimport moment from 'moment';\n\nVue.component('my-monthly-picker', VueMonthlyPicker);\n\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      selectedMonth: moment(), // Initialize with a moment object\n      minDate: moment().subtract(1, 'year'),\n      maxDate: moment().add(1, 'year')\n    }\n  },\n  template: `\n    <div id=\"app\">\n      <p>Selected Month: {{ selectedMonth ? selectedMonth.format('YYYY-MM') : 'None' }}</p>\n      <my-monthly-picker \n        v-model=\"selectedMonth\"\n        :min=\"minDate\"\n        :max=\"maxDate\"\n        placeHolder=\"Select a month...\"\n        :clearOption=\"true\"\n        dateFormat=\"MMMM YYYY\"\n      />\n      <p>Choose a month from the picker above.</p>\n    </div>\n  `\n});","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"This 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.","severity":"deprecated","affected_versions":"all"},{"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.","message":"The 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.","severity":"deprecated","affected_versions":"all"},{"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')`.","message":"The `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.","severity":"gotcha","affected_versions":"all"},{"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.","message":"Moment.js can sometimes emit deprecation warnings, especially when parsing non-standard date strings or when its internal fallback mechanisms are triggered.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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()`.","cause":"The `v-model` or `value` prop was initialized or updated with an invalid or non-Moment.js date object.","error":"[antdv:DatePicker] value provides invalidate moment time, if you want to set empty value, use null instead."},{"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.","cause":"Moment.js is not correctly imported, globally available, or passed to the component, or the component is used in a Vue 3 context.","error":"TypeError: Cannot read properties of undefined (reading '$moment') / 'moment is not a function'"},{"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.","cause":"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.","error":"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?"}],"ecosystem":"npm"}