kleinrein/vue-month-picker

A dead simple and elegant month picker for Vue

vue-month-picker

A lightweight month picker for Vue.js 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

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.
year-only	Boolean	false	Hide the months so it acts as a pure year picker
max-date	Date	null	Set a max date. Higher dates will be disabled.
min-date	Date	null	Set a min date. Lower dates will be disabled.
date-format	String	"%n, %Y"	Set a display format for non-ranged dates.
input-pre-filled	Boolean	false	Only applies for <month-picker-input>. Input will be pre filled if default-year and default-month is set.

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.
• rangeFrom: Selected month index range from.
• rangeTo: Selected month index range to.
• rangeFromMonth: Selected month from.
• rangeToMonth: Selected to month.

Translations

Available languages

Abbr	Language
af	Afrikaans
ar	Arabic
bg	Bulgarian
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

License

The MIT License (MIT)