VueJS Monthly Picker Component

VueJS Monthly Picker Component

A simple clean month picker component for Vue.js application.


Vue Monthly Picker Components

npm version CircleCI

Checkout demo at


npm install vue-monthly-picker --save
import VueMonthlyPicker from 'vue-monthly-picker'
Vue.component('my-component', {
    components: {



Note: v-model binding value need to be a moment object

Available props

Prop Type Default Description
disabled Boolean false Enable/disable component
monthLabels Array ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] Customize month labels
placeHolder String '' Place holder when value is null
min moment null Minimum time to select
max moment null Maximum time to select
dateFormat String YYYY/MM Display format.
value moment null Moment value of selected month and year
alignment String left Alignment of input value, possible value: left, right, center
selectedBackgroundColor String #007bff Background color of selected value. It can be HTML color name (red, green, blue) or hexa color code (#00FF00, #0000FF)


Event Params Description
selected selected month in moment A month has been selected

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Github Repository

Tags: #VueJs