Ant Design for React的DatePicker日期组件设置默认显示中文的方法和一些技巧

1.onClick(e)

自定义点击事件的处理方法。如处理  标签一样 - 调用 e.preventDefault() 来防止过度的点击，同时 e.stopPropagation() 可以阻止冒泡的事件。

2.setTimeout就是被放入异步任务队列中，等待主线程的任务执行完毕后再到主线程中执行。适用于当页面渲染state，建立ref完成后,使用监听器时候可以套用setTimeout.效果如下：

  useEffect(() => {
    setTimeout(() => {
      if (JSON.stringify(selectItem) != '{}') {
        switch (selectItem?.configType) {
          case '1':
            setFormArr(configForm);
            console.log(selectItem, fzRef?.current?.comFormRef()?.current, 'selectItem');
            fzRef?.current?.comFormRef()?.current?.setFieldsValue({ configName: 1, ...selectItem });
            break;
          case '2':
            setFormArr(configForm);
            break;
          case '3':
            setFormArr(configForm);
            break;
          default:
            break;
        }
      }
    }, 0);
  }, [selectItem, visible]);

注意： 如果不套用，则不知道feRef是什么东西

3.

a.单一组件设置为中文

import zhCN from 'antd/es/date-picker/locale/zh_CN'; // 引入中文包
// 组件添加 locale 属性
; // 设置为中文

b.注意：DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，需要先正确设置 moment 的 locale。

// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
;

c.ConfigProvider全局化配置：

ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

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 (
      

         // 设置 local 为中文。
        
时间流程
        

        
          
            
                  报名时间
                
            } labelCol={{span: 4}} wrapperCol={{span: 20}}>
              
            
          
          
            
                  初试时间
                
            } labelCol={{span: 4}} wrapperCol={{span: 20}}>
              
            
          
        
        
        
      
    );
  }
}

ReactDOM.render(, mountNode);