React DatePicker控制台输出Date对象，如何转为yyyy-MM-dd格式

问题原因 #

react-datepicker的dateFormat属性仅用于控制输入框中日期的显示格式，不会改变onChange回调返回的值类型——该回调默认始终返回原生Date对象，这就是你控制台打印出Thu Jun 15 2023 00:00:00 GMT+0530 (India Standard Time)的原因。

解决方案 #

你可以通过以下两种方式获取yyyy-MM-dd格式的字符串：

方案1：在onChange中直接格式化Date对象

利用react-datepicker依赖的date-fns库（无需额外安装）提供的format函数，将Date对象转换为目标格式的字符串，再存入状态：

1. 首先导入format函数：

import { forwardRef, useState } from "react";
import DatePicker from "react-datepicker";
import { format } from 'date-fns'; // 新增导入
import "react-datepicker/dist/react-datepicker.css";

2. 修改onChange回调逻辑：

export default function AddLaytime() {
  const [startDate, setStartDate] = useState();
  console.log(startDate); // 现在将打印格式化后的字符串

  const ExampleCustomInput = forwardRef(({ value, onClick, onChange }, ref) => (
    <input
      value={value}
      className="example-custom-input"
      onClick={onClick}
      onChange={onChange}
      ref={ref}
    ></input>
  ));

  return (
    <DatePicker
      selected={startDate ? new Date(startDate) : null} // 若状态存字符串，需转回Date对象供组件使用
      onChange={(date) => {
        // 将Date对象格式化为字符串后存入状态
        const formatted = date ? format(date, 'yyyy-MM-dd') : null;
        setStartDate(formatted);
      }}
      customInput={<ExampleCustomInput />}
      dayClassName={() => "example-datepicker-day-class"}
      popperClassName="example-datepicker-class"
      todayButton="TODAY"
      dateFormat='yyyy-MM-dd'
      placeholderText='Choose Date'
    />
  );
}

注意：如果将状态存为字符串，selected属性需要将字符串转回Date对象（如上述代码中的selected={startDate ? new Date(startDate) : null}），确保组件能正确识别选中状态。

方案2：维护两个状态（推荐）

分别维护一个存储原生Date对象的状态（供组件selected属性使用）和一个存储格式化后字符串的状态（供打印/业务逻辑使用），这样既不影响组件功能，又能直接获取目标格式：

import { forwardRef, useState } from "react";
import DatePicker from "react-datepicker";
import { format } from 'date-fns';
import "react-datepicker/dist/react-datepicker.css";

export default function AddLaytime() {
  const [selectedDate, setSelectedDate] = useState(null); // 存Date对象
  const [formattedStartDate, setFormattedStartDate] = useState(''); // 存格式化字符串
  console.log(formattedStartDate); // 直接打印字符串格式

  const ExampleCustomInput = forwardRef(({ value, onClick, onChange }, ref) => (
    <input
      value={value}
      className="example-custom-input"
      onClick={onClick}
      onChange={onChange}
      ref={ref}
    ></input>
  ));

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => {
        setSelectedDate(date);
        // 同步更新格式化后的字符串
        setFormattedStartDate(date ? format(date, 'yyyy-MM-dd') : '');
      }}
      customInput={<ExampleCustomInput />}
      dayClassName={() => "example-datepicker-day-class"}
      popperClassName="example-datepicker-class"
      todayButton="TODAY"
      dateFormat='yyyy-MM-dd'
      placeholderText='Choose Date'
    />
  );
}

补充说明 #

如果不想依赖date-fns，也可以用原生Date API实现格式化（兼容性稍差）：

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

然后在onChange中调用这个函数即可。

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