vue-month-picker

A lightweight month picker for Vue 2 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 | | 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)