npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-eor-month-picker

v1.0.3

Published

A simple and elegant month picker for Vue

Downloads

7

Readme

NPM version NPM downloads

vue-month-picker

A lightweight month picker for Vue.js 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 mih date. Higher dates will be disabled. | | 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)