vue-month-picker
A lightweight month picker for Vue.js with no dependencies.
Install
npm
yarn
Usage
Bundler (Webpack, Rollup)
Examples
Input
Inline
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 |
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 |
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 |
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.