search

ittus / vue-monthly-picker

VueJS Monthly Picker component
https://ittus.github.io/vue-monthly-picker/#/
MIT License
69 stars 28 forks source link
buefy bulma month-picker monthly-picker vuejs

readme

vue-monthly-picker

Vue Monthly Picker Components

npm version CircleCI

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

Support

Buy Me A Coffee

Install

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

Usage

<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

Events

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

# run all tests
npm run test