vue-month-picker v1.7.2

vue-month-picker

A lightweight month picker for Vue 2 with no dependencies.

Install

npm

npm install --save vue-month-picker

yarn

yarn add --save vue-month-picker

Usage

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)

Examples

Input

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

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

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

Inline

<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

My language is unsupported

You could add it in the languages.js file and create a pull request. You could also create a issue about the missing language. If you don't want to do that you can use the months property and supply your own array of 12 string values.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Development

Poi was used to develop this component.

poi

License

The MIT License (MIT)