ant-design datefns locale string incompatibility with antd

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Expand the DatePicker.

What is expected?

DatePicker to have correctly localised dates in Czech language (in this case)

What is actually happening?

Error is thrown

Environment	Info
antd	4.6.3
React	react 16.13.1
System	Windows 10
Browser	All latest

I have found the issue to be inconsistent locale string formats between Antd and date-fns.

...\node_modules\rc-picker\lib\generate\dateFns.js:15 in the function dealLocal

antd locale strings

date-fns locale strings

Resolution is to correctly map supported locales, which works for some languages using the current function but not for all as is the example with cs_CZ .

If someone provides a good idea how to resolve this issue or how to expose this function so people can implement it on their own I will be happy to try to create a PR.

Regards, Adam

Sep 11 '20 07:09 ad-ab

Hello @ad-ab. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @ad-ab, 我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

giphy

Sep 16 '20 05:09 ant-design-bot

This is because the antd [locale].DatePicker.lang.locale is not always compatible with that of date-fns.

A default language for country gets omitted in date-fns standards. As the underlying rc-picker CalendarLocale ("rc-picker/es/locale/[locale]) gets used in the DatePicker locale of antd and conforms to the format [language[_[COUNTRY[ the date-fns locale does not get loaded correctly and your Pickers throw an error.

So this problem does not exist for all locales, e.g. en_US (enUS in date-fns), zh_CN (zhCN in date-fns), etc. all work. But the issue does exist for locales like e.g. nl_NL (nl in date-fns), de_DE (de) and cs_CZ (cs in in date-fns)

To fix the mapping, you could as a workaround alter the nested locale string in question.

For your case adding this single line should do the trick:

csCZ.DatePicker.lang.locale = 'cs';

With context:

import csCZ from "antd/es/locale/cs_CZ";

csCZ.DatePicker.lang.locale = 'cs';

ReactDOM.render(
  <div className="App">
    <ConfigProvider locale={csCZ}>

Dec 02 '20 09:12 karaoak

A fix could be made inside the dealLocal function of the dateFns generateConfig of rc-picker. For an nl_NL or de_DE locale this fix would be trivial. However for a cs_CZ and possibly other locales I would not know what mapping logic to use.

So no PR yet, but maybe we could open an issue at rc-picker.

Dec 02 '20 09:12 karaoak

See: https://github.com/react-component/picker/issues/147

Dec 02 '20 09:12 karaoak

I'm seeing the same issue with the cs_CZ locale; unfortunately, the csCZ.DatePicker.lang.locale = 'cs'; did not seem to resolve the issue.

Instead I worked around this issue by manually pulling the bits that I needed from the dayjs locale directly:

const dayJsCs = require("dayjs/locale/cs"); // eslint-disable-line
localeData.DatePicker.lang.shortWeekDays = dayJsCs.weekdaysShort;
localeData.DatePicker.lang.shortMonths = dayJsCs.monthsShort;