React Datepicker手动输入时日期与月份互换问题求助

问题根源在于React Datepicker默认采用美式日期解析逻辑（MM/DD/YYYY）处理手动输入内容，而你的目标格式是DD/MMM/YYYY，导致日和月被错误互换。以下是具体解决方案：

1. 依赖准备（以date-fns为例） #

React Datepicker支持通过date-fns或moment.js自定义日期解析/格式化逻辑，这里推荐轻量化的date-fns：

npm install date-fns @date-io/date-fns

2. 自定义解析与格式化函数 #

通过自定义解析函数，强制按照DD/MMM/YYYY格式解析用户手动输入的内容，同时确保输出格式符合要求：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { parse, format } from "date-fns";
import { enGB } from "date-fns/locale";

// 解析手动输入的DD/MMM/YYYY格式字符串
const parseCustomDate = (inputStr) => {
  try {
    // 使用enGB locale确保月份缩写（如Jan/Feb）被正确识别
    return parse(inputStr, "dd/MMM/yyyy", new Date(), { locale: enGB });
  } catch (err) {
    return null; // 解析失败时返回null，组件会保留输入内容供用户修正
  }
};

// 格式化Date对象为DD/MMM/YYYY格式
const formatCustomDate = (date) => {
  return format(date, "dd/MMM/yyyy", { locale: enGB });
};

3. 配置DatePicker组件 #

将自定义函数传入组件，覆盖默认的解析逻辑：

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      dateFormat="dd/MMM/yyyy"
      parseDate={parseCustomDate} // 关键：指定自定义解析函数
      formatDate={formatCustomDate}
      locale={enGB}
      // 可选：开启下拉选择器减少手动输入场景
      showMonthDropdown
      showYearDropdown
    />
  );
}

补充说明 #

• 若使用moment.js，逻辑类似：用moment(inputStr, "DD/MMM/YYYY")解析，moment(date).format("DD/MMM/YYYY")格式化，无需额外locale配置（moment默认支持英文月份缩写）。
• 解析函数中加入异常捕获，避免无效输入导致组件报错。

内容的提问来源于stack exchange，提问作者ayşenur yeter