Vue 3中如何修改日期格式？Calendar组件输出格式不符预期

你遇到的是Calendar组件v-model返回ISO时区字符串，而非目标日期格式的问题，以下是两种可行方案：

方案1：使用组件内置的valueFormat属性（推荐） #

这个组件提供了valueFormat属性，专门用来指定v-model绑定值的格式，和控制显示的dateFormat区分开。修改你的组件代码，添加该属性：

<Calendar
  inputId="range"
  v-model="collectionItems.StartOn"
  selectionMode="range"
  :manualInput="false"
  dateFormat="yy-mm-dd"
  valueFormat="yyyy-mm-dd"
></Calendar>

设置后，collectionItems.StartOn会直接返回YYYY-MM-DD格式的字符串（比如2022-12-05），无需额外转换。

方案2：手动转换日期格式（适用于自定义需求） #

如果需要更灵活的格式控制，或者组件不支持valueFormat，可以通过计算属性监听转换ISO字符串：

// 在Vue组件的script部分
computed: {
  formattedStartOn: {
    get() {
      if (!this.collectionItems.StartOn) return '';
      // 转换为本地日期，提取年、月、日
      const date = new Date(this.collectionItems.StartOn);
      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}`;
    },
    set(val) {
      // 反向将字符串转为Date对象，供组件使用
      this.collectionItems.StartOn = new Date(val);
    }
  }
}

然后将Calendar的v-model绑定到这个计算属性：

<Calendar
  inputId="range"
  v-model="formattedStartOn"
  selectionMode="range"
  :manualInput="false"
  dateFormat="yy-mm-dd"
></Calendar>

时区注意事项 #

如果转换后日期和预期不符，大概率是时区偏移导致的：

• 若要基于UTC日期转换，将getFullYear()、getMonth()、getDate()替换为getUTCFullYear()、getUTCMonth()、getUTCDate()
• 若要基于本地时区转换，保持原有方法即可

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