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

This commit is contained in:
ddcat1115 2016-08-18 15:39:57 +08:00 committed by Benjy Cui
parent cf6643ae75
commit 6289d1202b
2 changed files with 15 additions and 5 deletions

View File

@ -7,11 +7,11 @@ title:
## zh-CN
通过 `locale` 配置时区、语言等, 默认支持 `en_US``zh_CN`。
通过 `locale` 配置时区、语言等, 默认支持 `en_US``zh_CN`。不同版本带有不同的时区配置,如果所在时区与默认配置不同,需要自行设置。上面的 demo 就是在东八区使用 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
@ -19,7 +19,7 @@ import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';
const customLocale = {
timezoneOffset: 0 * 60,
timezoneOffset: 8 * 60,
firstDayOfWeek: 0,
minimalDaysInFirstWeek: 1,
};

View File

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