VueMonthPicker is A lightweight month picker for Vue.js with no dependencies.

month picker bs, month picker flutter, month picker html, month picker example, month year picker bs, multiple month picker jquery, month picker javascript

How to make use of it:

Install & Download:

# Yarn
$ yarn add vue-month-picker

# NPM
$ npm install vue-month-picker --save

Bundler (Webpack, Rollup)

import Vue from 'vue'
import { MonthPicker } from 'vue-month-picker'
import { MonthPickerInput } from 'vue-month-picker'

Vue.use(MonthPicker)
Vue.use(MonthPickerInput)

<template>
  <month-picker-input :no-default="true"></month-picker-input>
</template>

<script>
import { MonthPickerInput } from 'vue-month-picker'

export default {
    components: {
        MonthPickerInput
    }
}
</script>

<template>
    <p>{{ date.month }}</p>
  <month-picker @change="showDate"></month-picker>
</template>

<script>
import { MonthPicker } from 'vue-month-picker'

export default {
    data() {
        return {
            date: {
                from: null,
                to: null,
                month: null,
                year: null
            }
        }
    },
    components: {
        MonthPicker
    },
    methods: {
        showDate (date) {
            this.date = date
        }
    }
}
</script>

Api

The MonthPicker and the MonthPickerInput shares the same props and events.

Props

Events

Date object

Change and input events returns a date object with the following properties:

• from: Start of the month.
• to: End of the month.
• month: Selected month.
• monthIndex: Selected month index.
• year: Selected year.
• rangeFrom: Selected month index range from.
• rangeTo: Selected month index range to.
• rangeFromMonth: Selected month from.
• rangeToMonth: Selected to month.

Translations

Available languages

Simple Month Picker For Vue, vue-month-picker Plugin/Github

See Demo And Download

Official Website(kleinrein): Click Here

This superior jQuery/javascript plugin is developed by kleinrein. For extra Advanced Usages, please go to the official website.