vue3-datepicker绑定的日期值如何转换为yyyy-MM-dd格式？

vue3-datepicker 的 inputFormat 属性仅控制输入框内的日期展示样式，v-model 默认绑定的是原生 Date 对象，所以直接打印会输出原生日期的完整格式。

下面是两种常用的实现方式，可根据业务需求选择：

• 方式一：通过计算属性转换（推荐）
  不需要修改原有绑定逻辑，新增计算属性按需调用即可：

<!-- 原有组件调用保持不变 -->
<datepicker  
  v-model="to_date"
  inputFormat="yyyy-MM-dd"
/>
<!-- 模板中需要展示格式化日期的位置直接调用计算属性 -->
<p>格式化后的日期：{{ formattedToDate }}</p>

export default {
  data() {
    return {
      to_date: new Date()
    }
  },
  computed: {
    formattedToDate() {
      const date = this.to_date
      const year = date.getFullYear()
      // 月份从0开始计数，需要+1，不足两位补0
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}

后续在js逻辑中需要用到格式化日期时，直接取this.formattedToDate即可。

• 方式二：直接存储格式化后的字符串
  如果希望绑定的变量本身就是yyyy-MM-dd格式的字符串，可以手动处理日期更新事件：

<datepicker  
  :model-value="to_date"
  inputFormat="yyyy-MM-dd"
  @update:model-value="handleDateUpdate"
/>

export default {
  data() {
    return {
      // 初始值也可以直接设置为日期字符串，如 '2024-01-01'
      to_date: new Date().toISOString().slice(0,10)
    }
  },
  methods: {
    handleDateUpdate(rawDate) {
      const date = new Date(rawDate)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      this.to_date = `${year}-${month}-${day}`
    }
  }
}

小提示：如果业务不需要考虑本地时区和UTC时区的差异，也可以使用new Date(rawDate).toISOString().split('T')[0]快速得到yyyy-MM-dd格式的UTC日期，该写法更简洁但需要注意时区偏差问题。

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