A simple and elegant month picker for Vue

by Vue.js Examples

vue-month-picker

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

View demo View Github

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

Prop Type Default Description
lang String en The language of the months.
months Array [] Custom months if language is unsupported.
default-month Integer The default selected month of the month picker. To show the month picker unselected, use the no-default prop.
default-year Integer The default year of the month picker.
no-default Boolean false Show the month picker unselected.
show-year Boolean false Show the year picker.
editable-year Boolean false Year appears as a input field.
clearable Boolean false Possible to clear the chosen month.
variant String default Color variant. Currently supports default and dark.

Events

Event Returns Description
@change Object Indicates that the value has been changed. NB, this will fire when a default value has been selected when the month picker is mounted. Use the input event if you want the value the user has selected.
@change-year Number Indicates that the year has been changed. Will emit the year value.
@input Object Indicates that the value has been changed by the user.
@clear Indicates that user have cleared the selected value

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.

Translations

Available languages

Abbr Language
af Afrikaans
ar Arabic
cs Czech
da Danish
de German
el Greek
en English
es Spanish
et Estonian
fi Finnish
fr French
hi Hindi
hr Croatian
hu Hungarian
id Indonesian
is Icelandic
it Italian
ja Japanese
km Khmer
ko Korean
ku Kurdish
lt Lithuanian
lv Latvian
ms Malay
ne Nepali
nl Dutch
no Norwegian
pa Panjabi
pl Polish
pt Portuguese
ru Russian
sv Swedish
sk Slovak
sl Slovenian
so Somali
sr Serbian
sq Albanian
th Thai
tr Turkish
uk Ukrainian
ur Urdu
vi Vietnamese
yi Yiddish
zh Chinese
zu Zulu

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

GitHub