react-datepicker组件依赖date-fns实现国际化功能时遇到的问题以及解决方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cc18868876837/article/details/86744583

react时间选择组件react-datepicker的功能非常强大，基本能达到你想要的效果。这里记录一下该时间选择组件实现国际化（多语言）的功能中遇到的问题以及解决方法。先看一下官方给出的解决方法：

从上面的的文档中我们可以知道react-datepicker要实现国际化功能是需要依赖date-fns包的，安装好这个包之后，国际化功能就可以展开了。主要分为以下三个步骤：

1. 首先，引入DatePicker组件以及注册语言的函数 registerLocale

import DatePicker, { registerLocale } from 'react-datepicker'

2. 其次，从date-fns中引入你想要的对应的哪国语言（这里导入泰文：th），再通过registerLocale将该语言注册到 DatePicker组件中

import th from 'date-fns/locale/th'
registerLocale('th', th)

3. 最后，然后在使用DatePicker时添加locale属性即可。

<DatePicker locale={'th'} />

以上即为使用方法，完整的一个DOME如下图（参考自：https://codesandbox.io/s/7j8z7kvy06）：

下面讲一下使用该功能时遇到的问题：

1. 安装date-fns包时遇到的问题：

   npm i date-fns
   

   使用该命令安装时，date-fns的版本可能为[email protected]（在package.json中可以查看到），会出现以下错误（Range Error: locale must contain localize property）：
   这可能是由于date-fns的版本不对造成的，解决办法是通过以下命令行来安装适合的版本：

npm i date-fns@next

此时安装的版本应该是：“date-fns”: "^2.0.0-alpha.27"
2. 还有一种情况可能出现：

ts检测时会发现没有默认导出，这时可以尝试以下方式导入：

import * as th from 'date-fns/locale/th'

备注：以上内容部分参考自stackoverflow上的回答