A dead simple and elegant month picker for Vue
A lightweight month picker for Vue.js with no dependencies.
npm
npm install --save vue-month-picker
yarn
yarn add --save vue-month-picker
import Vue from 'vue'
import { MonthPicker } from 'vue-month-picker'
import { MonthPickerInput } from 'vue-month-picker'
Vue.use(MonthPicker)
Vue.use(MonthPickerInput)
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>
The MonthPicker and the MonthPickerInput shares the same props and events.
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. |
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 |
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.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.
Poi was used to develop this component.
poi