Formik配合Yup做日期校验如何设置expirationDate最小值为enteredDate加1天

问题根源 #

yup.ref()返回的是Yup内部的字段引用标记，不是运行时的实际字段值，你直接将其传入dayjs做计算时，无法解析为合法日期对象，就会触发类型转换错误。

解决方案 #

使用Yup内置的when()方法监听enteredDate字段，运行时动态获取真实的日期值计算最小限制，示例代码如下：

import dayjs from 'dayjs';

// 字段校验规则
yup.date('Expiration Date')
  .nullable()
  .when('enteredDate', (enteredDate, schema) => {
    // enteredDate为空时不做额外限制
    if (!enteredDate) return schema;
    // 计算enteredDate的后一天，统一置零时分秒避免时间差误判
    const minExpireDate = dayjs(enteredDate).add(1, 'day').startOf('day').toDate();
    return schema.min(minExpireDate, 'Expiration Date needs to be after Entered Date');
  })

如果你不想引入dayjs依赖，可以用原生Date实现日期计算：

.when('enteredDate', (enteredDate, schema) => {
  if (!enteredDate) return schema;
  const minExpireDate = new Date(enteredDate);
  minExpireDate.setDate(minExpireDate.getDate() + 1);
  // 清除时分秒毫秒，避免同一天不同时间的校验误差
  minExpireDate.setHours(0, 0, 0, 0);
  return schema.min(minExpireDate, 'Expiration Date needs to be after Entered Date');
})

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