react-datepicker粘贴日期格式异常：期望dd.MM.yyyy却得MM.dd.yyyy

我遇到过类似的情况，react-datepicker在处理粘贴操作时，确实容易出现默认解析逻辑和我们预期格式不匹配的问题，特别是用非英文locale的时候。

问题复盘 #

你描述的场景是：初始日期显示dd.MM.yyyy完全正常，但粘贴外部复制的日期时，组件把MM.dd.yyyy当成了预期格式来解析，导致日和月颠倒，而且只有粘贴操作才会触发这个问题。核心原因是组件的onChangeRaw不会自动根据你设置的dateFormat去解析粘贴的字符串，而是依赖浏览器默认的日期解析规则，再加上ru locale的影响，解析顺序就乱了。

直接可用的解决方案 #

我们需要手动接管粘贴日期的解析逻辑，用指定格式来解析字符串，再同步到状态里。这里用react-datepicker默认依赖的date-fns来处理最方便，不用额外加依赖：

首先引入必要的工具：

import { parse } from 'date-fns';
import { ru } from 'date-fns/locale';

然后修改你的onChangeRawDate函数，加上手动解析逻辑：

const onChangeRawDate = (value: string) => {
  const isChangeSymbol = value.includes('.');
  setIsChangeSymbolsOnDateInput(isChangeSymbol);

  // 只有输入有值的时候才处理解析
  if (!value) return;

  try {
    // 用当前选中的格式来解析日期
    const targetFormat = isChangeSymbol ? 'dd.MM.yyyy' : 'dd/MM/yyyy';
    // 严格按照指定格式和locale解析，避免顺序错误
    const parsedDate = parse(value, targetFormat, new Date(), { locale: ru });

    // 验证解析出的日期是否有效，有效才更新状态
    if (!isNaN(parsedDate.getTime())) {
      setDate(parsedDate);
    }
  } catch (err) {
    console.error('日期解析出错啦:', err);
  }
};

最后给DatePicker组件加一个parseDate属性，禁用组件自带的自动解析，防止和我们的手动处理冲突：

<DatePicker
  locale='ru'
  className="date"
  onChange={(date) => {
    handleDate(date, setDate);
    console.log('datepicker', date);
  }}
  onChangeRaw={(event) => onChangeRawDate(event.target.value)}
  selected={date}
  dateFormat={isChangeSymbolsOnDateInput ? 'dd.MM.yyyy' : 'dd/MM/yyyy'}
  disabled={!isActiveFieldFromSingleParcelOrSinglePickupData}
  // 告诉组件不要自动解析输入内容，交给我们自己处理
  parseDate={(str) => str}
/>

为什么这样能解决问题？ #

• 用date-fns的parse方法，严格按照你设定的dd.MM.yyyy格式来解析字符串，不管浏览器默认规则是什么，日和月的顺序都不会错。
• 加上parseDate={(str) => str}，让组件放弃自动解析输入的文本，完全由我们的onChangeRaw来处理解析和状态更新，避免双重解析导致的冲突。
• 增加了日期有效性检查，防止无效的日期字符串污染状态。

这样修改后，粘贴日期的时候就会按照你预期的格式正确解析啦～

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