React DatePicker多语言配置后键盘输入日期报错如何解决

问题原因 #

• 自定义注册ptBR locale时，formatLong配置项为空。react-datepicker底层依赖date-fns处理日期逻辑，手动输入日期时会调用formatLong下的对应方法做输入内容的解析和校验，配置缺失就会触发报错。点击面板选择日期时不需要走输入解析逻辑，所以功能正常。
• 额外潜在问题：需确认translate.t("datapicker_translate")返回的字符串和注册的locale标识完全一致，不能出现大小写错误、多余空格等问题，比如注册的是ptBR，返回值就不能是ptbr、pt-BR等不匹配的内容，否则也会找不到对应locale配置触发报错。

解决方案 #

方案1：直接使用date-fns官方预设locale（推荐） #

官方预设的locale已经补全了所有需要的配置项，不需要自己手动写月份、日期数组，也不会缺配置导致报错，适配多语言更方便。

1. 先安装依赖：
   npm install date-fns @date-fns/locale
2. 修改代码如下：

import DatePicker, { registerLocale } from 'react-datepicker';
// 引入对应语言的预设locale
import ptBR from '@date-fns/locale/pt-BR';
import enUS from '@date-fns/locale/en-US';

// 注册所有需要的locale
registerLocale('ptBR', ptBR);
registerLocale('en', enUS);

// 组件调用
<DatePicker
    selected={realizedDateFrom}
    onChange={(date) => setRealizedDateFrom(date)}
    placeholderText={translate.t("activity_report_realized_from")}
    className="MuiInputBase-root MuiFilledInput-root activity-report-datepicker"
    dateFormat={'dd/MM/yyyy'}
    showMonthDropdown
    showYearDropdown
    formatWeekDay={nameOfDay => nameOfDay.substr(0, 3)}
    locale={translate.t("datapicker_translate")}
/>

方案2：手动补全自定义locale的配置 #

如果不想额外引入依赖，只需要补全formatLong的配置即可：

const MONTHSDATE = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
const DAYSDATE = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];

registerLocale('ptBR', {
        localize: {
            month: n => MONTHSDATE[n],
            day: n => DAYSDATE[n]
        },
        // 补全formatLong配置
        formatLong: {
            date: () => 'dd/MM/yyyy',
            time: () => 'HH:mm:ss',
            dateTime: () => 'dd/MM/yyyy HH:mm:ss'
        }
    });

额外优化 #

可以在传入locale前加一层校验，避免翻译返回未注册的locale值导致报错：

const validLocales = ['en', 'ptBR'];
const currentLocale = translate.t("datapicker_translate");
// 不匹配时默认用英文
const finalLocale = validLocales.includes(currentLocale) ? currentLocale : 'en';

// 组件中传入 locale={finalLocale}

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