如何修改Vuetify datepicker可接受的日期输入格式

核心原因：Vuetify的v-date-picker默认仅支持YYYY-MM-DD格式的字符串作为v-model绑定值，你从API获取的是带时分秒的ISO 8601格式字符串，格式不匹配导致组件无法识别。

解决步骤 #

1. 先写两个日期格式转换工具函数，同时避免时区导致的日期偏移问题：

// ISO 8601格式转日期选择器兼容的YYYY-MM-DD格式
function isoToDateStr(isoStr) {
  if (!isoStr) return ''
  const date = new Date(isoStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 日期选择器返回的YYYY-MM-DD格式转回ISO格式（提交给API时用）
function dateStrToIso(dateStr, keepTime = true) {
  if (!dateStr) return ''
  // 如果需要保留原数据的时分秒，可以把原ISO字符串的时分秒部分拼接进来
  if (keepTime && this.s?.expierDate) {
    const timePart = this.s.expierDate.split('T')[1]
    return `${dateStr}T${timePart}`
  }
  // 不需要保留原有时间的话，直接生成带默认时分秒的ISO格式
  return new Date(dateStr).toISOString()
}

2. 两种实现方案选其一即可：

方案1：用计算属性做自动双向转换（推荐，无需额外手动处理）

给日期选择器绑定一个计算属性，自动完成双向格式转换：

export default {
  computed: {
    pickerDate: {
      get() {
        return isoToDateStr(this.s.expierDate)
      },
      set(val) {
        this.s.expierDate = dateStrToIso.call(this, val)
      }
    }
  }
}

修改v-date-picker的绑定值：

<v-date-picker
  v-model="pickerDate"
  @input="date_picker = false"
></v-date-picker>

方案2：手动处理输入输出

拿到API返回数据时先转成组件兼容的格式，提交给后端前再转成API要求的格式：

// 接口请求成功后处理数据
fetchApi().then(res => {
  this.s = res.data
  this.s.expierDate = isoToDateStr(this.s.expierDate)
})

// 提交数据给接口前处理
submit() {
  const submitData = {
    ...this.s,
    expierDate: dateStrToIso(this.s.expierDate)
  }
  // 调用提交接口
}

你原有代码中v-text-field绑定的converDate函数可以保留，按需调整成你需要的文本显示格式即可，和日期选择器的绑定逻辑互不冲突。

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