A simple and elegant Month Picker for Vue.js

A simple and elegant Month Picker for Vue.js

A simple and elegant month picker for Vue .The MonthPicker and the MonthPickerInput shares the same props and events.

vue-month-picker

A lightweight month picker for Vue.js with no dependencies.

Install

npm

source-shell
npm install --save vue-month-picker

yarn

source-shell
yarn add --save vue-month-picker

Usage

Bundler (Webpack, Rollup)

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

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

Examples

Input

text-html-vue
<template>
  <month-picker-input :no-default="true"></month-picker-input>
</template>

<script>
import MonthPickerInput from 'vue-month-picker'

export default {
    components: {
        MonthPickerInput
    }
}
</script>

Inline

text-html-vue
<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.

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

source-shell
poi

License

The MIT License (MIT)

Github

kleinrein/vue-month-picker

vuejs javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate