quasar-vue-month-year-datepicker v1.0.1

Vue Quasar Month/Year Datepicker

Warning: This is an Quasar-CLI/Vue exclusive component! You only will run this successfully within an Quasar Framework project. More Details HERE and certify to add MDI Icons support.

This is a single component for Quasar Framework that renders inside a q-popup a datepicker with month and years options only for when you only need this two options alone, without the day.

Installing

To install with npm:

npm i quasar-vue-month-year-datepicker

Or with Yarn:

yarn add quasar-vue-month-year-datepicker

Usage

You can use as you would use the standart q-date, adding an q-input and a q-popup but changing the q-date into this component:

<template>
  <q-input
    class="col-xs-12 col-md-4"
    label="Period"
    stack-label
    dense
    mask="##/####"
    v-model.trim="period"
    ref="periodInput"
  >
    <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy
            ref="periodPopup"
            transition-show="scale"
            transition-hide="scale"
          >
            <!-- Here is the component -->
            <MonthYearDatepicker
              v-model="period"
              @hidePopup="() => $refs.periodPopup.hide()"
            />
          </q-popup-proxy>
        </q-icon>
    </template>
  </q-input>
</template>

<script>
// Here you will import it to your page
import MonthYearDatepicker from 'quasar-vue-month-year-datepicker'

export default {
  name: 'My Awesome Page',
  data () {
    return: {
      period: ''
    }
  }
}
</script>

API

If you think you can improve this component, please, contribute, It's open-source! :+1: