PrimeVue日期选择器手动输入叠加异常求助（搭配Zod校验）

兄弟我太懂这种抓狂的感觉了！手动输入日期的时候，居然把新输入的内容和原有日期叠在一起，变成04/04/2025/01/04/2001这种乱糟糟的格式，简直影响表单体验！

我帮你梳理几个大概率能解决问题的方向，都是实际踩过坑的经验：

1. 先统一日期选择器的格式配置 #

这是最常见的问题根源——PrimeVue的DatePicker如果没设置好mask和dateFormat，手动输入时就会无限制追加内容。比如你想用dd/mm/yyyy格式，一定要同时设置这两个属性：

<DatePicker 
  v-model="formData.date" 
  dateFormat="dd/mm/yyyy" 
  mask="99/99/9999"
/>

mask属性会强制输入符合「数字/数字/数字」的结构，输入时会自动覆盖对应位置的内容，而不是直接追加。

2. 同步Zod的校验规则和组件格式 #

你的Zod Schema必须和DatePicker的输出格式匹配，不然校验时会导致字段更新异常。这里有两种常用方式：

• 如果你的v-model绑定的是Date对象，直接用z.coerce.date()自动转换校验：

  import { z } from 'zod';
  import { zodResolver } from '@vee-validate/zod';
  
  const formSchema = z.object({
    date: z.coerce.date().refine(date => date <= new Date(), '不能选择未来日期')
  });
  
  const resolver = zodResolver(formSchema);
  

• 如果绑定的是字符串格式，就用正则匹配指定格式：

  const formSchema = z.object({
    date: z.string().regex(/^\d{2}\/\d{2}\/\d{4}$/, '日期格式必须为dd/mm/yyyy')
  });
  

3. 检查初始化值和表单更新逻辑 #

确保initialValues里的日期字段格式和组件要求一致：

• 如果是Date对象，就用new Date('2001-04-01')这种标准格式；
• 如果是字符串，就严格写成"01/04/2001"，别搞半吊子的格式。
  另外确认Form组件的resolver是正确引入的Zod resolver，别混用其他校验库的逻辑。

4. 临时应急方案：禁用手动输入 #

要是暂时没时间折腾配置，也可以给DatePicker加readonly属性，只让用户通过弹窗选择日期，彻底避免手动输入的问题：

<DatePicker v-model="formData.date" readonly />

备注：内容来源于stack exchange，提问作者Han Solo