Ant Design用起来确实很好用,若是做管理后台真的是很适合。
最近遇到了时间框汉化的问题,代码如下图:
<RangePicker
disabledDate = {this.disabledDate}
disabledTime = {this.disabledRangeTime}
onChange = {this.onChange}
showTime = {{hideDisabledOptions: true}}
format = "YYYY-MM-DD HH:00:00"
/>
结果如下图:
随之就要把时间选择器汉化,先是从antd官网找到一种方式,如下:
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
<RangePicker
disabledDate = {this.disabledDate}
disabledTime = {this.disabledRangeTime}
onChange = {this.onChange}
showTime = {{hideDisabledOptions: true}}
format = "YYYY-MM-DD HH:00:00"
/>
结果如下图:(日历部分变为中文,但是placeholder、select time和ok还是英文)
随后寻找很多办法,看官方文档https://ant.design/components/locale-provider-cn/找出了方法....‘国际化’
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { LocaleProvider } from 'antd';
<LocaleProvider locale={zh_CN}>
<RangePicker
disabledDate = {this.disabledDate}
disabledTime = {this.disabledRangeTime}
onChange = {this.onChange}
showTime = {{hideDisabledOptions: true}}
format = "YYYY-MM-DD HH:00:00"
/>
</LocaleProvider>
结果如下图:
总结:还是要好好看文档,哈哈哈哈哈哈