Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ittus/vue-monthly-picker
VueJS Monthly Picker component
https://github.com/ittus/vue-monthly-picker
buefy bulma month-picker monthly-picker vuejs
Last synced: about 1 month ago
JSON representation
VueJS Monthly Picker component
- Host: GitHub
- URL: https://github.com/ittus/vue-monthly-picker
- Owner: ittus
- License: mit
- Created: 2017-08-30T10:22:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-25T01:22:38.000Z (over 3 years ago)
- Last Synced: 2024-03-23T23:21:30.609Z (2 months ago)
- Topics: buefy, bulma, month-picker, monthly-picker, vuejs
- Language: JavaScript
- Homepage: https://ittus.github.io/vue-monthly-picker/#/
- Size: 3.96 MB
- Stars: 69
- Watchers: 4
- Forks: 29
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (UI Components / Form)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (UI Components / Form)
- awesome-vue - vue-monthly-picker ★33 - Vue.js component for month and year picker only (UI Components / Form)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (UI Components / Form)
- awesome-vue. - vue-monthly-picker - Vue.js component for month and year picker only (UI Components / Form)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (UI Components / Form)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (UI Components / Form)
- awesome-vue - vue-monthly-picker - Vue.js component for month and year picker only (Components & Libraries / UI Components)
- awesome-vuejs - vue-monthly-picker - Vue.js component for month and year picker only (UI Components / Form)
README
# vue-monthly-picker
> Vue Monthly Picker Components
[](https://badge.fury.io/js/vue-monthly-picker)
[](https://circleci.com/gh/ittus/vue-monthly-picker)
Checkout demo at https://ittus.github.io/vue-monthly-picker/
# Support
# Install
```
npm install vue-monthly-picker --save
```
```javascript
import VueMonthlyPicker from 'vue-monthly-picker'
Vue.component('my-component', {
components: {
VueMonthlyPicker
}
});
```
# Usage
```html
```
**Note**: `v-model` binding value need to be a **moment** object
## Available props
| Prop | Type | Default | Description |
|-----------------------|-----------------|-------------|------------------------------------------|
| disabled | Boolean | `false` | Enable/disable component |
| monthLabels | Array | `['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']` | Customize month labels |
| placeHolder | String | '' | Place holder when value is null |
| min | moment | `null` | Minimum time to select |
| max | moment | `null` | Maximum time to select |
| dateFormat | String | `YYYY/MM` | Display format. |
| value | moment | `null` | Moment value of selected month and year |
| alignment | String | `left` | Alignment of input value, possible value: `left`, `right`, `center` |
| selectedBackgroundColor | String | `#007bff` | Background color of selected value. It can be HTML color name (red, green, blue) or hexa color code (`#00FF00`, `#0000FF`) |
| clearOption | Boolean | true | Show/Hide clear option |
| inputClass | String | `input` | Customize css class for visible element |
## Events
| Event | Params | Description |
|-------|--------|-------------|
|selected| selected month in `moment`| A month has been selected |
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run all tests
npm run test
```