QDate lock to select only YYYY/MM

[MCK2]

Does anyone know if the q-calendar has any way to lock to select only year and month?

ex:
YYYY-MM
http://jsfiddle.net/eHLAw/3/?spm=a2c6h.14275010.0.0.78232770OqbDn0

[manacrox]

@MCK2 I was looking for the same, and came up with this solution:
The idea is to start with Year view then, when a month is selected, hide the popup calendar.

<template>
  <q-input
    readonly
    input-class="cursor-pointer"
    label="Select a Month"
    :value="monthPicked"
    @click="$refs.monthPicker.show()"
  >
    <template v-slot:append>
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy ref="monthPicker" transition-show="scale" transition-hide="scale">
          <q-date
            minimal
            emit-immediately
            default-view="Years"
            v-model="monthPicked"
            @input="checkValue"
          />
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script>
export default {
  data () {
    return {
      monthPicked: null
    }
  },
  methods: {
    checkValue (val, reason, details) {
      if (reason === 'month') {
        this.$refs.monthPicker.hide()
      }
    }
  }
}
</script>

[dobbel]

@MCK2

You are talking about q-calendar in your post, but your topic title is about q-date.
Those are different components, q-date is a standard quasar component and q-calendar is a quasar extension.

Q-Calendar:
https://github.com/quasarframework/quasar-ui-qcalendar

Q-Date:
https://quasar.dev/vue-components/date

[Adrian79]

@manacrox your code saved my day! But there are a few lines I added to make it perfect for me and would like to share it back in case somebody finds it useful.
The “interesting” part are the masks set both on the input and the calendar. This makes it show and save only the month and year part.

      <q-input
        readonly
        input-class="cursor-pointer"
        label="Inicio"
        :value="e.periodo.inicio"
        @click="$refs.monthPicker.show()"
        mask="##/####"
        fill-mask="##/####"
      >
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy ref="monthPicker" transition-show="scale" transition-hide="scale">
              <q-date
                minimal
                mask="MM/YYYY"
                emit-immediately
                default-view="Years"
                v-model="e.periodo.inicio"
                @input="checkValue"
              />
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>