react-datepicker结合react-hook-form使用时required必填校验不生效

问题原因 #

• 校验规则配置错误：Controller 组件上直接写的 required 是原生HTML属性，不会被react-hook-form识别为校验规则，所有校验逻辑需要统一放到 rules 属性中定义。
• 初始值缺失：如果 useForm 初始化时没有给对应字段设置默认值，初始值为 undefined 时可能导致必填校验判断异常。
• 部分场景下react-datepicker返回的无效日期对象也会绕过必填校验，需要额外增加有效性校验。

修复方案 #

第一步：配置useForm初始值 #

在初始化useForm时为日期字段设置初始值：

import { useForm, Controller } from "react-hook-form";
import Datetime from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

// 表单初始化
const { control, handleSubmit, formState: { errors } } = useForm({
  defaultValues: {
    resetDateTime: null // 初始值设为null，统一校验判断逻辑
  }
});

第二步：修正Controller校验配置 #

把必填规则放到rules属性中，可额外增加自定义校验避免无效日期通过：

<Controller
    name="resetDateTime"
    control={control}
    rules={{
      required: "This field is required",
      // 可选：增加日期有效性校验，避免选到无效日期
      validate: (value) => {
        return value instanceof Date && !isNaN(value.getTime()) || "请选择有效的日期时间";
      }
    }}
    render={({ field }) => (
        <Datetime
            onChange={(date) => field.onChange(date)}
            selected={field.value}
            inputProps={{
                placeholder: "MM-DD-YYYY HH:mm",
            }}
            viewMode="time"
        />
    )}
/>
{errors.resetDateTime && <span>{errors.resetDateTime.message}</span>}

第三步：确认表单提交写法正确 #

表单的提交事件必须用handleSubmit包裹你的业务提交函数，才能触发RHF的全量校验：

const onSubmit = (data) => {
  // 校验通过后才会执行的提交逻辑
  console.log(data);
}

<form onSubmit={handleSubmit(onSubmit)}>
  {/* 表单控件 */}
  <button type="submit">提交</button>
</form>

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