如何在react-datepicker的onChange事件中获取指定格式的日期值

API 探路者

2026-9-27

解决方案

react-datepicker 的 onChange 回调传入的参数本身就是标准 JavaScript Date 对象，你在控制台看到的长字符串只是 Date 对象默认的 toString 输出结果，你可以直接用这个对象做自定义格式化。

方案1：使用date-fns格式化（推荐，无需额外安装）

react-datepicker 内部默认依赖 date-fns 库，你可以直接引入它的格式化方法实现需求：

import DatePicker from "react-datepicker";
import { format } from "date-fns";
import fr from "date-fns/locale/fr";

const DatePick = () => {
  return (
    <DatePicker
      locale="fr"
      dateFormat="dd/MM/yyyy"
      onChange={(date) => {
        // 格式化为 dd-MM-yyyy 格式的字符串
        const formattedDate = format(date, "dd-MM-yyyy", { locale: fr });
        console.log(formattedDate); // 输出示例：09-12-2021
        // 直接把formattedDate传给表单提交接口即可
      }}
    />
  );
};

export default DatePick;

方案2：手写格式化工具函数（无额外依赖）

如果不想引入额外工具，自己写个简单的日期格式化函数即可：

import DatePicker from "react-datepicker";

// 自定义日期格式化函数
const formatDate = (date) => {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以要+1
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
}

const DatePick = () => {
  return (
    <DatePicker
      locale="fr"
      dateFormat="dd/MM/yyyy"
      onChange={(date) => {
        const formattedDate = formatDate(date);
        console.log(formattedDate); // 输出示例：09-12-2021
      }}
    />
  );
};

export default DatePick;