plugin showing month number instead of month name

[louiscoetzee]

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.

[ittus]

@louiscoetzee
Could you please show the code where you're using this component?

[louiscoetzee]

In my template:

  <div class="column">
    <b-form-group label="End Date" class="required">
      <vue-monthly-picker
        v-model="end_date"
        placeHolder="YYYY/MM"
        >
      </vue-monthly-picker>
    </b-form-group>
  </div>
</div>

In my script

`<script>
import VueMonthlyPicker from 'vue-monthly-picker'

export default {
components: {
VueMonthlyPicker
},
data() {
return {
start_date: '',
end_date: '',
}
}
}
</script>`

PS. I tried to paste my code in here and to format it properly, but struggled. Hope this is readable enough.

[ittus]

You need to pass monthLabels to the component

 <div class="column">
    <b-form-group label="End Date" class="required">
      <vue-monthly-picker
        v-model="end_date"
        placeHolder="YYYY/MM"
        :monthLabels="monthLabels"
        >
      </vue-monthly-picker>
    </b-form-group>
  </div>

  <script>
  export default {
    data() {
      return {
        monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      }
    }
  }
  </script>

The default monthLabels is an array of integer ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']. That's why it only shows the number.