Vuetify 3 月份选择器实现问题：type属性无效仍显示日期

这不是你的操作问题，Vuetify 3 目前的 v-date-input 组件确实存在 type="month" 属性失效的情况——该属性在 Vuetify 2 中可以正常切换到仅选月份的界面，但在 Vuetify 3 里仍会显示完整的日期选择面板，属于框架版本适配的未完善点。

给你两个可行的替代实现方案：

方案一：原生月份输入框结合Vuetify样式包裹 #

利用原生 HTML 的 <input type="month">，搭配 Vuetify 的 v-text-field 做样式容器，既能保留框架的视觉风格，又能实现纯月份选择：

<v-text-field
  label="选择月份"
  prepend-icon="mdi-calendar"
>
  <template v-slot:input>
    <input
      type="month"
      class="v-field__input"
      style="border: none; outline: none; background: transparent;"
      v-model="selectedMonth"
    >
  </template>
</v-text-field>

<script setup>
import { ref } from 'vue'
const selectedMonth = ref('')
</script>

方案二：自定义下拉式月份选择器 #

通过 v-menu 搭配 v-select 实现完全可控的月份选择组件，适合需要自定义选项范围或样式的场景：

<template>
  <v-menu v-model="isMenuOpen">
    <template v-slot:activator="{ props }">
      <v-btn v-bind="props" variant="outlined">
        {{ selectedMonth ? formatMonthText(selectedMonth) : '选择月份' }}
      </v-btn>
    </template>
    <v-select
      v-model="selectedMonth"
      :items="monthList"
      dense
      @update:model-value="isMenuOpen = false"
    />
  </v-menu>
</template>

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

const isMenuOpen = ref(false)
const selectedMonth = ref('')

// 生成最近6年的月份选项
const monthList = computed(() => {
  const list = []
  const currentYear = new Date().getFullYear()
  for (let year = currentYear; year >= currentYear - 5; year--) {
    for (let month = 1; month <= 12; month++) {
      const monthStr = month.toString().padStart(2, '0')
      list.push({
        text: `${year}年${month}月`,
        value: `${year}-${monthStr}`
      })
    }
  }
  return list
})

// 格式化选中的月份文本
const formatMonthText = (value) => {
  const [year, month] = value.split('-')
  return `${year}年${month}月`
}
</script>

你可以关注 Vuetify 官方的更新日志或 GitHub 仓库的 issues，后续版本大概率会修复 v-date-input 的 type="month" 属性失效问题。

内容的提问来源于stack exchange，提问作者intelis