Ant Design时间选择汉化问题总结

汉化前代码与展示效果

代码

import {  Button, Calendar } from 'antd';
import React, {  Component } from 'react';
class Date extends Component { 
    render() { 
        return (
            <div>
                <Button type="primary">Button</Button>
                <div>
                        <Calendar fullscreen={ false}/>
                </div>
            </div>
        );
    }
}
export default Date;

展示效果

汉化方法总结

方法一：局部汉化（即只对当前部分组件汉化）

import React, {  Component } from 'react';
import {  Button, Calendar, ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'; // 引入语言包
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn'); 
class Date extends Component { 
    render() { 
        return (
            <div>
                <Button type="primary">Button</Button>
                <div>
                    <ConfigProvider  locale={ zhCN}>
                        <Calendar fullscreen={ false}/>
                    </ConfigProvider>
                </div>
            </div>
        );
    }
}
export default Date;

方法一：全局汉化（在index.js文件中设置）

import {  ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'; // 引入语言包
import 'moment/locale/zh-cn';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';
moment.locale('zh-cn');
ReactDOM.render( <ConfigProvider locale = { zhCN}> <App/> </ConfigProvider>, document.getElementById('root'));
serviceWorker.unregister();

汉化后的效果展示

参考链接

传送门1
传送门2

原文链接：https://blog.csdn.net/weixin_39893889/article/details/104628553

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。