Antd DatePicker默认值设置问题：编辑场景无过期日期显示异常

架构老林

2026-7-31

解决方案

问题出在你给DatePicker的默认值处理逻辑上：当没有过期日期时，你用了dayjs("")或者false，但DatePicker不接受这些值，会解析成无效日期。另外，当前代码手动用getValues和setValue处理状态，不如直接借助Controller的field参数绑定，更符合React Hook Form的规范。

你可以这么改：

修正默认值逻辑：编辑场景（存在id）且有过期日期时，用dayjs转换日期；否则（新增场景或编辑场景无过期日期）传null，DatePicker会识别为空白状态。
绑定Controller的field参数：把field.value传给DatePicker的value，用field.onChange处理日期变更，不用手动调用setValue。

修改后的代码如下：

<FormControl>
  <Controller
    control={control}
    name={`userCountryRoleMappings.${index}.roleExpiryDate`}
    render={({ field }) => (
      <DatePicker
        placeholder="Role Expiry Date"
        value={
          id 
            ? field.value ? dayjs(field.value) : null 
            : null
        }
        disabled={getValues(`userCountryRoleMappings.${index}.neverExpireRole`)}
        onChange={(date, dateString) => {
          field.onChange(dateString);
        }}
        size="large"
        disabledDate={d => !d || d.isBefore(new Date().toISOString())}
      />
    )}
  />
</FormControl>

关键说明：

value属性：替代原来的defaultValue，Controller会通过field.value管理表单值，编辑场景下field.value自动带初始过期日期（如果有），无值时为null，DatePicker显示空白，不会出现invalid date提示。
onChange处理：直接调用field.onChange(dateString)，让React Hook Form自动更新表单状态，减少冗余代码。
空值兼容：当表单初始值中roleExpiryDate为undefined或空字符串时，field.value ? dayjs(field.value) : null的判断能确保只有有效日期字符串才会被转换为dayjs对象。