Y
Y
Yan2021-08-26 21:34:52
Vue.js
Yan, 2021-08-26 21:34:52

Vuetify - calendar with year only selection?

Hello.
There is a task to make a calendar in which only the year is available for selection.
The calendar has a "From" and "To" field, filtering occurs between dates.
At the moment I have a situation in which the first click on each of the fields gives the desired result, BUT if the year needs to be changed, I have a choice of month in one of the fields (arbitrarily).

- I suppose it's in this area, but I don't know how I can do better.

watch: {
      menu_from (val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
    },
    menu_to (val) {
      val && this.$nextTick(() => (this.$refs.picker.activePicker = 'YEAR'))
    },
  },

Rest of the code:
computed: {
    from_dateNom () {
      return this.from_dateNomRaw ? moment(this.from_dateNomRaw).format('YYYY') : ''
    },
    to_dateNom () {
      return this.to_dateNomRaw ? moment(this.to_dateNomRaw).format('YYYY') : ''
    },

<template v-slot:activator="{ on, attrs }">
                    <v-text-field
                      class="from-date mr-1"
                      :value="from_dateNom"
                      label="От"
                      readonly
                      append-icon="mdi-calendar"
                      outlined
                      hide-details
                      clearable
                      v-bind="attrs"
                      v-on="on"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="from_dateNomRaw"
                    no-title
                    :first-day-of-week="1"
                    :max="todayMix"
                    reactive
                    show-current
                    type="month"
                    ref="picker"
                    color="primary"
                    locale="ru"
                    @input="menu_from = false"
                    scrollable
                  >
                  </v-date-picker>


upd: Yes, indeed, on the second click on the year line, my activePicker changes from "YEAR" to "MONTH", I still don't understand what to do with it

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question