Skip to content

Commit 268d601

Browse files
authored
docs: update DatePicker locale instruction (ant-design#48111)
1 parent 18dc816 commit 268d601

File tree

4 files changed

+18
-26
lines changed

4 files changed

+18
-26
lines changed

components/date-picker/index.en-US.md

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -65,19 +65,6 @@ The default locale is en-US, if you need to use other languages, recommend to us
6565

6666
If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json).
6767

68-
<!-- prettier-ignore -->
69-
:::warning
70-
When use with Next.js App Router, make sure to add `'use client'` before import locale file of dayjs. It's because all components of Ant Design only works in client, importing locale in RSC will not work.
71-
:::
72-
73-
```jsx
74-
import locale from 'antd/es/date-picker/locale/zh_CN';
75-
76-
import 'dayjs/locale/zh-cn';
77-
78-
<DatePicker locale={locale} />;
79-
```
80-
8168
```jsx
8269
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
8370
// Make sure you import the relevant dayjs file as well, otherwise the locale won't change for all texts (e.g. range picker months)
@@ -86,11 +73,18 @@ import dayjs from 'dayjs';
8673

8774
import 'dayjs/locale/zh-cn';
8875

76+
dayjs.locale('zh-cn');
77+
8978
<ConfigProvider locale={locale}>
9079
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
9180
</ConfigProvider>;
9281
```
9382

83+
<!-- prettier-ignore -->
84+
:::warning
85+
When use with Next.js App Router, make sure to add `'use client'` before import locale file of dayjs. It's because all components of Ant Design only works in client, importing locale in RSC will not work.
86+
:::
87+
9488
### Common API
9589

9690
The following APIs are shared by DatePicker, RangePicker.

components/date-picker/index.zh-CN.md

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,6 @@ demo:
6666

6767
如有特殊需求(仅修改单一组件的语言),请使用 locale 参数,参考:[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)
6868

69-
<!-- prettier-ignore -->
70-
:::warning
71-
在搭配 Next.js 的 App Router 使用时,注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件,在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
72-
:::
73-
74-
```jsx
75-
import locale from 'antd/es/date-picker/locale/zh_CN';
76-
77-
import 'dayjs/locale/zh-cn';
78-
79-
<DatePicker locale={locale} />;
80-
```
81-
8269
```jsx
8370
// 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale
8471
// 确保还导入相关的 dayjs 文件,否则所有文本的区域设置都不会更改(例如范围选择器月份)
@@ -87,11 +74,18 @@ import dayjs from 'dayjs';
8774

8875
import 'dayjs/locale/zh-cn';
8976

77+
dayjs.locale('zh-cn');
78+
9079
<ConfigProvider locale={locale}>
9180
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
9281
</ConfigProvider>;
9382
```
9483

84+
<!-- prettier-ignore -->
85+
:::warning
86+
在搭配 Next.js 的 App Router 使用时,注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件,在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
87+
:::
88+
9589
### 共同的 API
9690

9791
以下 API 为 DatePicker、 RangePicker 共享的 API。

docs/react/faq.en-US.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,8 @@ type InputRef = GetRef<typeof Input>;
135135
Please check whether you have imported dayjs locale correctly.
136136

137137
```jsx
138+
import dayjs from 'dayjs';
139+
138140
import 'dayjs/locale/zh-cn';
139141

140142
dayjs.locale('zh-cn');

docs/react/faq.zh-CN.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,8 @@ type InputRef = GetRef<typeof Input>;
163163
请检查是否正确设置了 dayjs 语言包。
164164

165165
```js
166+
import dayjs from 'dayjs';
167+
166168
import 'dayjs/locale/zh-cn';
167169

168170
dayjs.locale('zh-cn');

0 commit comments

Comments
 (0)