Yup.date()校验通过后如何转换为无时区日期字符串适配Django

核心问题场景 #

• 项目基于react-hook-form + Yup实现表单校验，原有schema配置如下：

const validationSchema = Yup.object({
  installation: Yup.string().nullable().required("Required"),
  from_date: Yup.date()
    .max(new Date(), "Cannot use future date")
    .nullable()
    .required("Required"),
  to_date: Yup.date()
    .min(Yup.ref("from_date"), "To Date cannot be before From Date")
    .max(new Date(), "Cannot use future date")
    .nullable()
    .required("Required")
});

• 现有校验规则运行正常，但校验通过后日期字段返回值为带时区的ISO格式字符串，例如2021-03-31T18:30:00.000Z，与后端Django对应DateField要求的无时区yyyy-MM-dd格式不匹配
• 曾尝试将字段类型直接替换为Yup.string()保留输入原始值，但会丢失原有日期合法性、边界范围、跨字段联动的全部校验能力
• 初步实现思路：以Yup.string作为基础类型接收输入，在校验流程中将输入转为Date对象完成全部原有校验规则，校验通过后再转回yyyy-MM-dd格式字符串作为最终输出值

思路可行性判断 #

该思路完全可行，是当前技术栈下最适配的实现方案。整个逻辑可以完全复用Yup的现有校验链路，不需要在表单提交环节额外写手动转换逻辑，还能完整保留所有原有校验规则，不会出现能力缺失。

具体实现代码 #

先封装本地日期格式化工具，避免出现UTC时区偏差：

// 将Date对象转为本地时区的yyyy-MM-dd格式字符串
const formatLocalDate = (date: Date) => {
  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}`;
};

基于工具方法重写校验schema：

const validationSchema = Yup.object({
  installation: Yup.string().nullable().required("Required"),
  from_date: Yup.string()
    .nullable()
    .required("Required")
    // 校验输入为可解析的有效日期
    .test('valid-date', 'Invalid date', (value) => {
      if (!value) return true;
      const parsedDate = new Date(value);
      return !isNaN(parsedDate.getTime());
    })
    // 校验不允许选择未来日期
    .test('not-future', "Cannot use future date", (value) => {
      if (!value) return true;
      const inputDate = new Date(value);
      const todayEnd = new Date();
      todayEnd.setHours(23, 59, 59, 999); // 允许选择当天日期
      return inputDate <= todayEnd;
    })
    // 校验通过后自动转换为目标格式
    .transform((value) => {
      if (!value) return value;
      return formatLocalDate(new Date(value));
    }),
  to_date: Yup.string()
    .nullable()
    .required("Required")
    .test('valid-date', 'Invalid date', (value) => {
      if (!value) return true;
      const parsedDate = new Date(value);
      return !isNaN(parsedDate.getTime());
    })
    .test('not-future', "Cannot use future date", (value) => {
      if (!value) return true;
      const inputDate = new Date(value);
      const todayEnd = new Date();
      todayEnd.setHours(23, 59, 59, 999);
      return inputDate <= todayEnd;
    })
    // 跨字段校验：结束日期不能早于开始日期
    .test(
      'date-order',
      'To Date cannot be before From Date',
      function(value) {
        if (!value) return true;
        const { from_date } = this.parent;
        if (!from_date) return true;
        return new Date(value) >= new Date(from_date);
      }
    )
    .transform((value) => {
      if (!value) return value;
      return formatLocalDate(new Date(value));
    })
});

实现关键注意点 #

• 日期格式化时禁止直接调用Date对象的toISOString()方法：该方法会将时间转为UTC标准时区，例如东八区用户选择本地时间2024-05-20 02:00，转成ISO字符串后会变为2024-05-19T18:00:00.000Z，直接截取前10位会出现日期与用户选择不一致的偏差
• Yup的transform方法会集成在完整校验流程中，只有当前置的所有规则校验通过后，转换后的值才会作为最终表单提交值，不需要单独在提交拦截器中处理数据清洗
• 跨字段校验可以直接通过test方法上下文的this.parent获取同层级的表单字段值，不需要依赖Yup.ref，在string类型字段下的兼容性更好，不会出现ref解析异常的问题

问题表述优化建议 #

当前问题已经覆盖了核心场景、现有尝试、实现思路，信息完整度足够。如果希望提升获得精准解答的效率，可以补充两个细节：

• 项目中使用的Yup、react-hook-form的具体版本，避免版本差异导致的方案不兼容
• 日期选择组件返回的原始输入值格式（是原生Date对象、字符串、还是时间戳），可以进一步减少方案适配的调试成本

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