在 onChange 中获取 React DatePicker 日期值

Question

我正在使用react-datepicker，但无法获取 中的实际日期onChange。

\n

这是我的组件：

\n

import DatePicker from "react-datepicker";\n\nconst DatePick = () => {\n  return (\n    <DatePicker\n      locale="fr"\n      dateFormat="dd/MM/yyyy"\n      onChange={(date) => {\n        console.log(date);\n      }}\n    />\n  );\n};\n\nexport default DatePick;\n

\n

在 console.log 中我得到了这种 string Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d\xe2\x80\x99Europe centrale)。

\n

我需要获取日期dd-MM-yyyy或onChange可以格式化并稍后在表单中使用的日期并提交其值。

\n

Answer 1

使用下面的代码，它会像魅力一样工作

const [Cdate, setDate] = useState(new Date().toLocaleDateString('fr-FR'));
return (
 <>
  <DatePicker
    dateFormat="dd/MM/yyyy"
    value={Cdate}
    onChange={(date) => {
      const d = new Date(date).toLocaleDateString('fr-FR');
      console.log(d);
      setDate(d);
    }}
  />
 </>
);

stackblitz 链接：https://stackblitz.com/edit/react-nov8it?file =src/App.js