Browse Source

docs: LocaleProvider, DatePicker 补充时区说明 (#2761)

pull/2768/head
ddcat1115 8 years ago
committed by Benjy Cui
parent
commit
6289d1202b
  1. 6
      components/date-picker/demo/locale.md
  2. 14
      components/locale-provider/demo/all.md

6
components/date-picker/demo/locale.md

@ -7,11 +7,11 @@ title:
## zh-CN ## zh-CN
通过 `locale` 配置时区、语言等, 默认支持 `en_US`,`zh_CN`。 通过 `locale` 配置时区、语言等, 默认支持 `en_US`,`zh_CN`。不同版本带有不同的时区配置,如果所在时区与默认配置不同,需要自行设置。上面的 demo 就是在东八区使用 en_US 版本的例子。
## en-US ## en-US
Use locale to set the properties like time zone, language and etc. en_US, zh_CN are supported by default. Use locale to set the properties like time zone, language and etc. `en_US`, `zh_CN` are supported by default. There are different time zone configuration in different versions, you must set it by yourself if your time zone does not match the default setting. The example above is to show how to use the `en_US` version at GMT+8 time zone.
````jsx ````jsx
@ -19,7 +19,7 @@ import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US'; import enUS from 'antd/lib/date-picker/locale/en_US';
const customLocale = { const customLocale = {
timezoneOffset: 0 * 60, timezoneOffset: 8 * 60,
firstDayOfWeek: 0, firstDayOfWeek: 0,
minimalDaysInFirstWeek: 1, minimalDaysInFirstWeek: 1,
}; };

14
components/locale-provider/demo/all.md

@ -3,7 +3,7 @@ order: 2
title: 所有组件 title: 所有组件
--- ---
此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。 此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。涉及时间的组件请注意时区设置 [DatePicker](/components/date-picker/#components-date-picker-demo-locale)。
````jsx ````jsx
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar, import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
@ -24,6 +24,12 @@ const columns = [{
dataIndex: 'age', dataIndex: 'age',
}]; }];
const customLocale = {
timezoneOffset: 8 * 60,
firstDayOfWeek: 1,
minimalDaysInFirstWeek: 1,
};
const Page = React.createClass({ const Page = React.createClass({
getInitialState() { getInitialState() {
return { return {
@ -104,6 +110,10 @@ const App = React.createClass({
this.setState({ locale: e.target.value }); this.setState({ locale: e.target.value });
}, },
render() { render() {
const locale = { ...this.state.locale };
if (locale.DatePicker) {
locale.DatePicker = { ...locale.DatePicker, ...customLocale };
}
return ( return (
<div> <div>
<div className="change-locale"> <div className="change-locale">
@ -113,7 +123,7 @@ const App = React.createClass({
<Radio.Button key="cn">中文</Radio.Button> <Radio.Button key="cn">中文</Radio.Button>
</Radio.Group> </Radio.Group>
</div> </div>
<LocaleProvider locale={this.state.locale}><Page /></LocaleProvider> <LocaleProvider locale={locale}><Page /></LocaleProvider>
</div> </div>
); );
}, },

Loading…
Cancel
Save