vue-month-picker

A lightweight month picker for Vue 2 with no dependencies.

!VueMonthPicker

Install

npm

``bash
npm install --save vue-month-picker
`

yarn

`bash
yarn add --save vue-month-picker
`

Usage

$3

`js
import Vue from 'vue'
import { MonthPicker } from 'vue-month-picker'
import { MonthPickerInput } from 'vue-month-picker'

Vue.use(MonthPicker)
Vue.use(MonthPickerInput)
`

$3

Input

`vue




`

Inline

`vue




`

Api

_The MonthPicker and the MonthPickerInput shares the same props and events._

$3

| 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 . Input will be pre filled if default-year and default-month is set. |

$3

| 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 |
| 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.

`bash
poi
``

License

The MIT License (MIT)