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

Date _Time



Vue Monthly Picker Components

npm version CircleCI

Checkout demo at https://ittus.github.io/vue-monthly-picker/


Buy Me A Coffee


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


<vue-monthly-picker  v-model="selectedMonth"> </vue-monthly-picker>

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)
clearOption Boolean true Show/Hide clear option
inputClass String input Customize css class for visible element


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

Build Setup

# install dependencies yarn install  # serve with hot reload at localhost:8080 yarn dev  # build for production with minification yarn build  # run all tests yarn test

You May Also Like