如何阻止Vuetify v-date-picker切换type时改变日期格式

问题根源：Vuetify的v-date-picker组件会根据type属性自动调整v-model的格式——type="date"时返回YYYY-MM-DD，type="month"时返回YYYY-MM，这就是格式变化的核心原因。要保持统一的YYYY-MM-DD格式，需要手动处理绑定值的转换。

以下是适配你当前Vuetify ^2.6.10和Nuxt ^2.15.8版本的解决方案：

方案1：用计算属性实现双向绑定（推荐） #

通过计算属性封装日期值，在组件返回值时自动补全日期为当月第一天，确保始终输出YYYY-MM-DD格式：

<template>
  <v-date-picker
    v-model="formattedFromDate"
    :active-picker.sync="computeCalendar"
    :type="computeCalendar"
  />
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      rawFromDate: '', // 实际业务逻辑使用这个变量
      computeCalendar: 'date',
      period: ''
    }
  },
  computed: {
    formattedFromDate: {
      get() {
        // 切换到month类型时，确保返回完整的年月日格式
        if (this.computeCalendar === 'month' && this.rawFromDate) {
          return moment(this.rawFromDate).startOf('month').format('YYYY-MM-DD')
        }
        return this.rawFromDate
      },
      set(newVal) {
        // 不管组件返回什么格式，统一转成YYYY-MM-DD存储
        if (this.computeCalendar === 'month') {
          this.rawFromDate = moment(newVal).startOf('month').format('YYYY-MM-DD')
        } else {
          this.rawFromDate = newVal
        }
      }
    }
  },
  methods: {
    changePeriod({ val = new Date }) {
      this.computeCalendar = this.period === 'Yearly' ? 'month' : 'date'
      if (this.period === 'Yearly') {
        this.rawFromDate = moment(val).startOf('year').format('YYYY-MM-DD')
      }
    }
  },
  watch: {
    rawFromDate(val) {
      console.log("changed ", val) // 现在始终输出YYYY-MM-DD格式
    }
  }
}
</script>

方案2：监听type变化，强制格式化日期 #

如果不想修改现有变量结构，也可以通过监听computeCalendar的变化，在类型切换后重新格式化日期：

<script>
import moment from 'moment'

export default {
  data() {
    return {
      from_date: '',
      computeCalendar: 'date',
      period: ''
    }
  },
  methods: {
    changePeriod({ val = new Date }) {
      this.computeCalendar = this.period === 'Yearly' ? 'month' : 'date'
      if (this.period === 'Yearly') {
        this.from_date = moment(val).startOf('year').format('YYYY-MM-DD')
      }
    }
  },
  watch: {
    computeCalendar(newType) {
      if (newType === 'month' && this.from_date) {
        // 切换到month类型时，自动补全日期为当月第一天
        this.from_date = moment(this.from_date).startOf('month').format('YYYY-MM-DD')
      }
    },
    from_date(val) {
      // 额外监听，防止组件返回短格式时自动修正
      if (val && val.length === 7) {
        this.from_date = moment(val).startOf('month').format('YYYY-MM-DD')
      }
      console.log("changed ", val)
    }
  }
}
</script>

两种方案都是利用moment将YYYY-MM格式补全为YYYY-MM-01，确保日期值始终保持统一格式，你可以根据自己的代码结构选择合适的方式。

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