在useForm中设置input type='datetime-local'值和min属性

Question

我知道您可以在 useForm hook 中设置默认值，并通过“react-hook-form”中的 Reset() 重置它。但我无法将 value 和 min 属性设置为 new Date() ，以便每次打开表单时，都有更新的值。

为了简单起见，假设有输入文本字段，并且我将默认值设置为 new Date()，我希望每次打开表单时都能看到当前日期，但它没有更新。以下是我正在尝试做的事情的示例：

import....
let timeValue = new Date();
let minValue = timeValue.setMinutes(timeValue.getMinutes() + 30);

const {
    register,
    handleSubmit,
    reset
  } = useForm({
    defaultValues: {
      date: timeValue.toISOString().slice(0,16),
    },
  });

const onSubmit = data => {
  console.log(data);
  reset();
};

<form onSubmit={handleSubmit(onSubmit)}>
  <label htmlFor="date">Date
    <input
      type="datetime-local"
      id="deadline"
      {...register("due", { required: true, min: {value: minValue.toISOString().slice(0,16), message: 'Deadline cannot be set in the past.'} })}
    />
  </label>
</form>

Answer 1

我的代码看起来与你的非常相似

除了默认值在我的输入中，并且我使用

substring

而不是切片

<input defaultValue={new Date().toISOString().substring(0, 16)}/>

请注意，由于时区偏移，这可能不正确

我用这个解决方案来解决这个问题 javascript toISOString() 忽略时区偏移