Vuejs-Vue monthly picker v0.2.8: vue-monthly-picker - Vue.js component for month and year picker only

icon
Latest Release: v0.2.8

vue-monthly-picker

Vue Monthly Picker Components

npm version CircleCI

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

Support

Buy Me A Coffee

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
yarn install

# serve with hot reload at localhost:8080
yarn dev

# build for production with minification
yarn build

# run all tests
yarn test

Comments

  • Moment Object returns to the model rather than formated string
    Moment Object returns to the model rather than formated string

    Mar 17, 2020

    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.

    Reply
  • dateFormat doesn't work
    dateFormat doesn't work

    May 22, 2020

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

    Reply
  • sending one month minus month to laravel backend
    sending one month minus month to laravel backend

    Jul 20, 2020

    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 ?

    Reply
  • plugin showing month number instead of month name
    plugin showing month number instead of month name

    Aug 21, 2020

    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.

    Reply
  • Update to use vue-cli
    Update to use vue-cli

    Aug 25, 2020

                                                                                                                                                                                                           
    Reply
  • Moment object contains inconsistent timestamp
    Moment object contains inconsistent timestamp

    Jan 10, 2021

    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?

    Reply
  • Translate Display format
    Translate Display format

    Apr 11, 2019

    Hello, is there any possibility to translate dateFormat option?

    Reply
  • Can't set min value
    Can't set min value

    Apr 4, 2019

    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.

    Reply
  • It's not working.
    It's not working.

    Jan 18, 2018

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

    Reply
  • Not working...
    Not working...

    Dec 7, 2017

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

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

    May 22, 2018

    vue-monthly-error

    Type: Enhancement 
    Reply
  • it seems that the monthly picker is invisible in code
    it seems that the monthly picker is invisible in code

    Jul 20, 2018

    The Component is not showing up in my application.

    Reply