如何修改PrimeVue Calendar组件日期选择时v-model绑定值的格式

PrimeVue Calendar组件的dateFormat属性仅控制输入框内的展示文本格式，不影响v-model的返回值格式，你可以通过内置的dataType配置项调整v-model的返回格式，具体说明如下：

• 默认dataType取值为date，v-model返回原生JavaScript Date对象，你看到的2021-09-13T22:00:00.000Z是Date对象序列化后的UTC时间格式，出现日期差是因为本地时区和UTC时区存在偏移。
• 将dataType设置为string后，v-model会直接返回符合dateFormat配置的字符串，和输入框显示内容完全一致。
• 如果需要保留Date类型返回值同时避免时区偏移问题，可以额外添加:utc="true"配置，选中的日期会按UTC标准计算，不会出现本地时区和UTC的日期差。

调整后的组件示例代码：

<Calendar 
    :id="fields.data.formName" 
    v-model="catalogEntrySelections[fields.data.formName]"
    dateFormat="yy-mm-dd"
    dataType="string"
    :showIcon="true"
    :showWeek="true"
/>

如果有特殊自定义格式需求，也可以监听组件的change事件，拿到选中的Date对象后手动格式化再赋值给绑定变量。

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