ittus / vue-monthly-picker

VueJS Monthly Picker component

vue-monthly-picker

Vue Monthly Picker Components

Checkout demo at https://ittus.github.io/vue-monthly-picker/

Support

Install

npm install vue-monthly-picker --save

import VueMonthlyPicker from 'vue-monthly-picker'
Vue.component('my-component', {
    components: {
        VueMonthlyPicker
    }
});

Usage

<vue-monthly-picker
 v-model="selectedMonth">
</vue-monthly-picker>

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

# 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

vue-monthly-picker's Issues

plugin showing month number instead of month name

Hi, thanks for this great component, it is exactly what i was looking for.

Currently the plugin is only showing the month number and not the name, am i missing something? checked out the config options and only see month labels option? seems to be only on my side as the demo shows the month names. Your help will be appreciated.

Translate Display format

Hello, is there any possibility to translate dateFormat option?

sending one month minus month to laravel backend

hello there

i am using this package with laravel backend whenever i am trying to catch the month in back end it's giving me one month earlier value such as .. if i send 2020-01 in back end i am getting 2019-12 how can i solve it ?

Calendar visually defaults to Jan or Dec if min/max are specified

Steps to reproduce:

1. Open https://ittus.github.io/vue-monthly-picker/#/
2. Enable "Range"
3. Select October or November

The label will show the correct date, but December will be highlighted.

Update to use vue-cli

Customise css issue

how can i change date-popover style,
Please help me any one.

How to customize label of month. I wish not to change the value (1,2,3,...12) only change the label.

Hello, I update the latest version，it does not normal to run!

Can't choose max value

Can't pick max value despite can choose min value

Is there any possibility to clear selected value?

Is there any possibility to clear selected value?
When some month/year is selected there is no way to clear it.

Moment object contains inconsistent timestamp

Here's my control.
<vue-monthly-picker selectedBackgroundColor="#66615b" v-bind:monthLabels="labels" clearOption placeHolder="MM/YYYY" dateFormat="MM/YYYY" v-model="user.MonthDate"> </vue-monthly-picker>

If I select April 2020 (04/2020) (for example)
this is the value I'm seeing when debugging.
this.user.MonthDate.toString(): "Wed Apr 01 2020 00:00:00 GMT+0100"
this.user.MonthDate.utc().toString(): "Tue Mar 31 2020 23:00:00 GMT+0000"
this.user.MonthDate.utc().month(): 2
this.user.MonthDate.month(): 2

But it I select Mar 2020 (03/2020)
I see this value
this.user.MonthDate.toString(): "Tue Mar 31 2020 23:00:00 GMT+0000"
this.user.MonthDate.utc().toString(): "Tue Mar 31 2020 23:00:00 GMT+0000"
this.user.MonthDate.utc().month(): 2
this.user.MonthDate.month(): 2

Because of this, when I use April, May etc the month() function is returning me the wrong value i.e. 2 for April instead of 3. If I select Mar then it's also 2 so I can't tell what the real month is. Is there a workaround or can this be fixed?

using in buefy(bulma) as component

The vue-monthly-picker is very useful component for me.
I am using it in buefy(bulma) as a component, but it can not be changed color and font-weight/size.
If adding option like 'is-primay, is-warning' as type, it can be use in buefy(bulma) as native component.

dateFormat doesn't work

<vue-monthly-picker
        v-model="search.date_from"
         :dateFormat="'YYYY-MM'"
         :clearOption=false
         :inputClass="'form-control form-control-sm rounded-right-0 cursor-pointer'"
 />

i got result like this　↓

...
date_from:{
 ....
 _d:  "YYYY/MM"
 _i:  "2020/5"
 ....
}
...

prop is passed correctly.

Moment Object returns to the model rather than formated string

My vue Component

<vue-monthly-picker
                  dateFormat="YYYY-MM"
                  v-model="date"
                ></vue-monthly-picker>

Expected behaviour:
the model date should be string of format YYYY-MM rather than moment object.

Use class-based strategy instead of scoped attribute.

Component libraries, however, should prefer a class-based strategy instead of using the scoped attribute.

https://vuejs.org/v2/style-guide/#Component-style-scoping-essential

Null Value

Hi,
I need to initialize the component with an empty value, so I pass the NULL value, but in this way the component does not seem to work: the click does not open the calendar.
There are no errors in the console.

Here the model property binded

 StartDate: {
      get: function () {
        let date = null

        if (this.StartDate) {
          date = moment(this.StartDate)
        }

        return (date && date.isValid() ? date : null)
      },
      set: function (val) {
        this.StartDate= val.format('YYYY-MM-DD')
      }
    },

It's not working.

i can see the elements on inspect element but its not displaying anything. There is no error in console as well.

input-class prop missing in the docs

Hello,

First of all thanks for this component.

The first thing I tried to do with this component is to change the styles of the input, however in the readme it is not mentionned.
I looked in the code and saw the prop inputClass which works perfectly :)

Please consider adding this to the readme.

Thanks

The min and max limits can be broken by selecting the year

The min/max limits only appear to affect the ability to select months within the current year. It's still possible to use the year selection arrows to go beyond the min/max limits (if they are set).

format

Can we change input format like 2017 - Feb

it seems that the monthly picker is invisible in code

The Component is not showing up in my application.

Not working...

i can see the elements on inspect element but its not displaying in my project

selected events run Always

:selected='handleSelectedDate()' write before
change @selected='handleSelectedDate' is correct

Can't set min value

There is an error Error in render: "TypeError: this.min.isBefore is not a function" when I set min value, however I can set max value and it works.

Add support for Portuguese

Disable Month

Can we disable month by setting max and min month