如何将MySQL日期值正确设置到React编辑组件的日期输入框？

核心问题分析 #

HTML的<input type="date">仅接受**YYYY-MM-DD格式的字符串**作为value，而从MySQL返回的date类型数据，可能会以带时间的ISO字符串（如2024-05-20T00:00:00.000Z）或纯日期字符串的形式返回，需要根据实际返回格式做对应处理。

具体解决方案 #

1. 处理带时间的ISO格式日期

如果后端返回的日期包含时间部分（比如从Node.js查询后返回的是Date对象或ISO字符串），需要截取日期部分：

useEffect(() => {
    const id = +params.vacationId;
    vacationsService.getOneVacation(id)
        .then(vacation => {
            setValue("vacationId", vacation.vacationId);
            setValue("destination", vacation.destination);
            setValue("description", vacation.description);
            // 处理日期格式，截取YYYY-MM-DD部分
            setValue("checkIn", vacation.checkIn.split('T')[0]);
            setValue("checkOut", vacation.checkOut.split('T')[0]);
            setValue("price", vacation.price);
            setValue("image", vacation.image);
        })
        .catch(err => notifyService.error(err));
}, []);

2. 处理已为纯日期格式的字符串

如果后端返回的已经是YYYY-MM-DD格式的字符串，直接设置即可，但要确保没有多余的空格或格式错误：

// 无需额外处理，直接赋值
setValue("checkIn", vacation.checkIn);
setValue("checkOut", vacation.checkOut);

3. 确保日期输入框正确注册

确认你的日期输入框已经通过react-hook-form的register方法正确注册：

<input
  type="date"
  {...register("checkIn")}
/>
<input
  type="date"
  {...register("checkOut")}
/>

额外注意事项 #

• 如果后端返回的是Date对象而非字符串，需要先转换为ISO字符串再处理：

  setValue("checkIn", new Date(vacation.checkIn).toISOString().split('T')[0]);
  

• 可以在then回调中打印vacation.checkIn确认返回值的格式，再针对性调整处理逻辑。

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