蚂蚁金服的前端UI框架Ant Design 有专门针对 React 设计的 Ant Design for React 。今天在使用其中的 DatePicker 日期组件时遇到一个问题，其中有一些按钮显示英文，如下图所示：
官方给出了设置中文的方法，称之为“国际化配置”：
默认配置为 en-US，如有特殊需求（仅修改单一组件的语言），可使用 locale 参数，参考：默认配置。
单一组件设置为中文：
代码语言：javascript复制import zhCN from 'antd/es/date-picker/locale/zh_CN'; // 引入中文包
// 组件添加 locale 属性
<DatePicker locale={zhCN} />; // 设置为中文注意：DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，需要先正确设置 moment 的 locale。
代码语言：javascript复制// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />;如果页面中的日期组间比较多，可以为组件设置统一的全局化变量。
ConfigProvider全局化配置：
ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。
用法：
代码语言：javascript复制import { ConfigProvider } from 'antd';
// ...
return (
<ConfigProvider {...yourConfig}>
<App />
</ConfigProvider>
);其实也不一定需要包裹整个应用，只在在有组件的部分进行包裹也可以。下面是代码展示：
代码语言：javascript复制import {Form, Input, Select, Row, Col, Checkbox, Button, AutoComplete, LocaleProvider, DatePicker, ConfigProvider } from 'antd'; // Ant
import zhCN from 'antd/es/locale/zh_CN'; // 引入语言包
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn'); // 注意这里设置 moment 必须放在有 import 的后面。
const { RangePicker } = DatePicker;
class Page extends React.Component {
return (
<div className="locale-components">
<ConfigProvider locale={zhCN}> // 设置 local 为中文。
<h3 className={`mb-10`}>时间流程</h3>
<div className={`module-content`}>
<Row gutter={35}>
<Col span={12}>
<Form.Item label={
<span>
报名时间
</span>
} labelCol={{span: 4}} wrapperCol={{span: 20}}>
<RangePicker
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder={['开始时间', '结束时间']}
onChange={onChange}
onOk={onOk}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label={
<span>
初试时间
</span>
} labelCol={{span: 4}} wrapperCol={{span: 20}}>
<RangePicker
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder={['开始时间', '结束时间']}
onChange={onChange}
onOk={onOk}
/>
</Form.Item>
</Col>
</Row>
</div>
</ConfigProvider>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);这样就可以显示中文了：
Content Security Policy
另外，部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 csp 属性来进行配置：
代码语言：javascript复制<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>声明：本文由w3h5原创，转载请注明出处：《Ant Design for React的DatePicker日期组件设置默认显示中文的方法》 https://cloud.tencent.com/developer/article/1537810
