在 onChange 中获取 React DatePicker 日期值答案

【问题标题】：Get React DatePicker date value in onChange在 onChange 中获取 React DatePicker 日期值
【发布时间】：2021-12-01 10:40:48
【问题描述】：

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

这是我的组件：

import DatePicker from "react-datepicker";

const DatePick = () => {
  return (
    <DatePicker
      locale="fr"
      dateFormat="dd/MM/yyyy"
      onChange={(date) => {
        console.log(date);
      }}
    />
  );
};

export default DatePick;

在 console.log 中，我得到了这种字符串 Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d’Europe centrale)。

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

【问题讨论】：

标签： reactjs react-datepicker

【解决方案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

【讨论】：

【解决方案2】：

您可以使用 Date 对象，根据需要设置日期格式。例如：

onChange={(date) => {
    const dateString = new Date(date).toLocaleDateString()
    console.log(dateString)
  }}

然后，您将获得格式化为您所在地区时区的日期。但是，如果您在 DatePicker 中指定了与本地时区格式不同的格式，则可以将其指定为 toLocaleDateString 的参数：

new Date(date).toLocaleDateString("fr-FR")

【讨论】：