Vue <Calendar>组件v-model日期格式化为yyyy-mm-dd的实现方案

方案1：优先尝试组件自身格式化配置 #

先确认你使用的Calendar组件是否支持直接指定v-model的输出格式。很多UI库的日历组件中，date-format仅控制输入框的显示样式，而value-format才是用来定义v-model输出格式的属性。如果组件支持，直接添加该属性即可：

<Calendar
    v-model="value"
    :date-format="props.dateFormat"
    :value-format="'yyyy-MM-dd'" <!-- 新增属性指定输出格式 -->
    :view="props.view"
    :input-class="props.inputClass"
    show-icon
/>

方案2：用计算属性实现双向转换 #

如果组件不支持直接配置v-model输出格式，就用计算属性做中间层，完成Date对象和格式化字符串的双向转换：

Vue 3 写法 #

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

const value = ref(new Date())
// 定义计算属性处理格式转换
const formattedValue = computed({
  get() {
    if (!value.value) return ''
    // 将Date对象转为yyyy-mm-dd格式
    return value.value.toISOString().split('T')[0]
  },
  set(val) {
    if (val) {
      // 将格式化字符串转回Date对象
      value.value = new Date(val)
    }
  }
})
</script>

<template>
  <Calendar
    v-model="formattedValue"
    :date-format="props.dateFormat"
    :view="props.view"
    :input-class="props.inputClass"
    show-icon
  />
</template>

Vue 2 写法 #

<script>
export default {
  data() {
    return {
      value: new Date()
    }
  },
  computed: {
    formattedValue: {
      get() {
        if (!this.value) return ''
        return this.value.toISOString().split('T')[0]
      },
      set(val) {
        if (val) {
          this.value = new Date(val)
        }
      }
    }
  }
}
</script>

<template>
  <Calendar
    v-model="formattedValue"
    :date-format="props.dateFormat"
    :view="props.view"
    :input-class="props.inputClass"
    show-icon
  />
</template>

方案3：监听变量变化手动格式化 #

如果不想用计算属性，也可以通过监听原变量的变化，同步生成格式化后的字符串：

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

const value = ref(new Date())
const formattedDate = ref('')

// 监听Date对象变化，自动转为格式化字符串
watch(value, (newVal) => {
  formattedDate.value = newVal ? newVal.toISOString().split('T')[0] : ''
}, { immediate: true })

// 若需手动输入日期后同步回原变量
const syncValue = (val) => {
  value.value = new Date(val)
}
</script>

<template>
  <Calendar
    v-model="value"
    :date-format="props.dateFormat"
    :view="props.view"
    :input-class="props.inputClass"
    show-icon
    @change="syncValue"
  />
<!-- formattedDate即为yyyy-mm-dd格式的日期 -->
</template>

关键说明 #

• 你之前直接给v-model绑定函数报错，是因为v-model要求绑定的是可赋值的变量（左值），而函数调用结果无法被赋值，不符合语法要求。
• 上述示例用toISOString().split('T')[0]实现简单格式化，也可以用dayjs、moment等日期库更灵活处理，比如：

  import dayjs from 'dayjs'
  // 格式化时替换为
  return dayjs(newVal).format('YYYY-MM-DD')
  

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