Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vuetify 3 – Implementing date picker

I’m trying to achieve a simple "month-picker" in Vuetify 3. I went through the documentation and the component’s API, but I can’t seem to find a way to use it.

There is a type property on component, but it doesn’t seem to do anything.

<template>
  <v-app>
    <v-container>
      <v-date-input type="month" label="Date input"></v-date-input>
    </v-container>
  </v-app>
</template>

But the output still contains days.

enter image description here

Whats is weird to me, is that this functionality already existed in Vuetify 2 – https://v2.vuetifyjs.com/en/components/date-pickers-month/.

Am I doing something wrong or is this just a bug?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've ended up with something like this.

    <script setup>
  import { ref, computed } from 'vue'

  const viewMode = ref('year')
  const selectedYear = ref()
  const selectedMonth = ref()

  function updateViewMode(mode) {
    viewMode.value = mode === 'year' ? 'year' : 'months'
  }

  function updateYear(year) {
    selectedYear.value = year
  }

  function updateMonth(month) {
    selectedMonth.value = month
  }

  const selectedDate = computed(() => {
    return selectedYear.value !== undefined && selectedMonth.value !== undefined
      ? new Date(selectedYear.value, selectedMonth.value)
      : null
  })
</script>

<template>
  <v-app>
    <v-container>
      <div>{{ selectedYear }} {{ selectedMonth }} {{ selectedDate }}</div>
      <v-date-picker
        :view-mode="viewMode"
        @update:year="updateYear"
        @update:view-mode="updateViewMode"
        @update:month="updateMonth"
      />
    </v-container>
  </v-app>
</template>

  2. 0

    This looks like it is working.

    <script setup>
import { ref } from 'vue'
const currentMode = ref('months')

function swapToYear() {
  currentMode.value = 'year'
}
</script>

<template>
  <v-app>
    <v-container>
      <v-date-picker :view-mode="currentMode" @update:month="swapToYear">
      </v-date-picker>
    </v-container>
  </v-app>
</template>

    Using view-mode="months" and @update:month fixed the issue.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search