在useForm中设置datetime-local输入框的value与min属性问题

问题根源 #

1. 字段名不匹配：useForm的defaultValues中使用了date作为键，但输入框注册的字段名是due，导致默认值无法绑定到输入框。
2. minValue类型错误：setMinutes()返回的是时间戳（数字类型），而非Date对象，调用toISOString()会报错。
3. 默认值仅初始化一次：useForm的defaultValues仅在钩子初始化时设置一次，若表单是切换显示而非重新挂载，默认值不会自动更新为当前日期。

修复方案 #

1. 统一字段名：确保defaultValues的键与输入框的注册字段名一致。
2. 正确创建minValue：使用新的Date对象存储30分钟后的时间，避免修改原日期对象。
3. 动态重置表单值：在表单打开或提交后，调用reset()并传入最新的日期值，确保每次显示表单时都是当前时间。

修正后的代码 #

import { useForm } from "react-hook-form";

const MyForm = () => {
  const { register, handleSubmit, reset } = useForm({
    defaultValues: {
      due: new Date().toISOString().slice(0, 16),
    },
  });

  // 生成最新的30分钟后时间
  const getMinValue = () => {
    const minDate = new Date();
    minDate.setMinutes(minDate.getMinutes() + 30);
    return minDate.toISOString().slice(0, 16);
  };

  const onSubmit = (data) => {
    console.log(data);
    // 提交后重置为当前时间
    reset({ due: new Date().toISOString().slice(0, 16) });
  };

  // 若表单为条件显示（如模态框），在显示时调用reset更新值
  // useEffect(() => { if (isModalOpen) reset({ due: new Date().toISOString().slice(0,16) }); }, [isModalOpen, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="deadline">Date</label>
      <input
        type="datetime-local"
        id="deadline"
        {...register("due", {
          required: true,
          min: {
            value: getMinValue(),
            message: "截止时间不能设置在过去",
          },
        })}
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;

关键说明 #

• getMinValue函数：每次渲染时生成最新的30分钟后时间，确保min属性始终符合要求。
• reset()传参：提交后或表单打开时，通过传递新日期值强制更新输入框显示。
• 字段名一致性：defaultValues的due与输入框注册名对应，确保默认值正确绑定。

内容的提问来源于stack exchange，提问作者neo-the-coder