未捕获错误：无效日期：21/01/2023 使用 DateTIme Picker 进行反应

Question

我不知道这里的问题是什么，因为我已经按照文档实现了反应日期时间选择器，但是当我选择一个日期时，它显示无效日期

Uncaught Error: Invalid date: 17/01/2023

，我做错了什么

import DateTimePicker from 'react-datetime-picker';
function ServiceDetail() {
    const [date, setDate] = useState(new Date());
    return (
      <DateTimePicker
        className="float-start"
        style={{ border: "none" }}
        value={date}
        dateFormat="dd/MM/yyyy"
        onChange={(date) => {
          const d = new Date(date).toLocaleDateString("fr-FR");
          console.log(d);
          setDate(d);
        }}
    name="booking_date"
/>;
)

我根据 SO 的 ans 添加了更多属性 https://stackoverflow.com/a/70183380/15178267

Answer 1

那是因为您的日期状态是 Date 类型，但您试图将其设置为字符串，即“17/01/2023”。此外，如react-datetime-picker文档中所述，该组件接受Date类型的值。

将您的组件转换为：

function ServiceDetail() {
  const [date, setDate] = React.useState(new Date());
  return (
    <DateTimePicker
      className="float-start"
      style={{ border: 'none' }}
      value={date}
      locale="fr-FR"
      dateFormat="dd/MM/yyyy"
      onChange={(date) => {
        setDate(date);
      }}
      name="booking_date"
    />
  );
}

Answer 2

const [date, setDate] = useState(new Date().toLocaleDateString('fr-FR'));

你应该再次更改此行，它会起作用