React DateTimePicker报Uncaught Error: Invalid date问题求助

核心错误原因 #

react-datetime-picker组件的value属性要求接收Date对象，但你在onChange回调中将日期转换为了字符串格式（如"17/01/2023"），并把这个字符串存入了状态。当组件尝试解析这个字符串作为日期值时，就会抛出Invalid date错误。

修正后的代码 #

import DateTimePicker from 'react-datetime-picker';
import { useState } from 'react';

function ServiceDetail() {
    // 状态始终存储Date对象，符合组件要求
    const [date, setDate] = useState(new Date());
    // 若需格式化后的字符串用于表单提交等场景，单独处理即可
    const formattedDate = date.toLocaleDateString("fr-FR");

    return (
      <DateTimePicker
        className="float-start"
        style={{ border: "none" }}
        value={date}
        dateFormat="dd/MM/yyyy"
        onChange={(newDate) => {
          // 直接传入组件返回的Date对象，无需转换为字符串
          setDate(newDate);
        }}
        name="booking_date"
      />
    )
}

补充说明 #

• 组件会根据你设置的dateFormat自动渲染格式化后的日期，无需手动修改状态中的日期类型。
• 如果需要将日期以特定格式提交给后端，建议在提交表单时再进行格式化（比如调用toLocaleDateString或使用date-fns等日期库处理），不要直接修改组件绑定的状态值类型。

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