日期组件的使用——antd本地化处理

配置导入

下载

yarn add moment

在入口文件index，js中。

// antd组件默认使用的英文，需要进行本地化语言处理
import {
    
     ConfigProvider } from 'antd'
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/es/locale/zh_CN'
// 处理antd中日期控制中的中文问题
import moment from 'moment'
import 'moment/locale/zh-cn'

moment.locale('zh-cn')

包裹日期组件<DatePicker />

ReactDOM.render(
    <Provider store={
    
    store}>
        <Router>
            <ConfigProvider locale={
    
    zhCN}>
                <App />
            </ConfigProvider>
        </Router>
    </Provider>,
    document.getElementById("root")
);

---

使用：

import moment from "moment"

function funtime(moment,str){
    
    
   console.log(moment);//moment对象
   console.log(str);//2022-10-07
}
<DatePicker onChange={
    
    funtime}/>
//初始化后退一年
<DatePicker onChange={
    
    funtime} defaultPickerValue={
    
    moment().add(-1,'y')}/>
初始化如期，moment对象上的

但是如何去计算这个年份之间的插据呢；
它提供了一个方法：

    function funtime(moment,str){
    
    
        console.log("当前的时间为：",moment().format("YYYY-MM-DD"));
        console.log("传过来的时间",str.format("YYYY-MM-DD"));
        console.log("计算的时间差",moment().diff(str));
    }