如何修改Vuetify中v-text-field的日期格式

注意：当v-text-field设置type="date"时，它本质是原生<input type="date">组件，其显示格式由用户浏览器/系统的区域设置决定，无法直接通过属性强制修改。以下是两种可行的解决方案：

方法一：使用Vuetify v-date-picker配合v-text-field（推荐） #

通过日期选择器组件实现完全可控的日期格式，代码示例：

<v-menu
  v-model="menuFrom"
  :close-on-content-click="false"
  transition="scale-transition"
  offset-y
>
  <template v-slot:activator="{ on, attrs }">
    <v-text-field
      label="From Date"
      v-model="formattedFromDate"
      readonly
      v-bind="attrs"
      v-on="on"
    ></v-text-field>
  </template>
  <v-date-picker
    v-model="from_date"
    @input="menuFrom = false"
    date-format="yyyy/MM/dd"
  ></v-date-picker>
</v-menu>

对应的脚本部分：

export default {
  data() {
    return {
      menuFrom: false,
      from_date: null
    }
  },
  computed: {
    formattedFromDate() {
      // 将ISO格式的日期转换为yyyy/mm/dd
      return this.from_date ? this.from_date.replace(/-/g, '/') : ''
    }
  }
}

方法二：全局配置Vuetify日期格式（仅对部分组件生效） #

如果需要全局统一日期格式，可在Vuetify初始化时配置locale：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

const vuetify = new Vuetify({
  locale: {
    dateFormat: 'yyyy/MM/dd'
  }
})

注：此配置对原生type="date"的v-text-field无效，仅对Vuetify自带的日期组件（如v-date-picker）生效。

方法三：手动处理日期格式（兼容原生输入框） #

若坚持使用原生日期输入框，可通过隐藏的原生组件配合计算属性实现格式转换：

<!-- 用于显示的文本框 -->
<v-text-field
  label="From Date"
  v-model="formattedFromDate"
  readonly
  @click="triggerDateInput"
></v-text-field>

<!-- 隐藏的原生日期输入框 -->
<input
  type="date"
  ref="dateInput"
  v-model="from_date"
  style="display: none"
  @input="syncFormattedDate"
>

脚本部分：

export default {
  data() {
    return {
      from_date: null,
      formattedFromDate: ''
    }
  },
  methods: {
    triggerDateInput() {
      this.$refs.dateInput.click()
    },
    syncFormattedDate() {
      this.formattedFromDate = this.from_date ? this.from_date.replace(/-/g, '/') : ''
    }
  }
}

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