react + antd 日期组件中文处理

前言

• 上一节我们讲调antd UI 组件该怎么把默认的英文改成默认中文展示react + antd 默认中文展示 ,但是，当用到 RangePicker 日期组件的时候就很奇怪了，出现了中英文混合展示。
  中英文混合展示

解决方案

• 在仔细阅读过文档后发现，需要对其进行国际化处理
  文档内容
• 但是，由于我们已经在app.jsx 页面已经进行了国际化处理 ，所以我们只需要引入dayjs即可

import "dayjs/locale/zh-cn";

或者在统一的国际化页面进行处理也可以，此处我写在app.jsx

import { BrowserRouter } from "react-router-dom";
import AppRouter from "./router/index";
import { ConfigProvider } from "antd";
import "dayjs/locale/zh-cn";
import zhCN from "antd/lib/locale/zh_CN";
function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <BrowserRouter>
        <AppRouter />
      </BrowserRouter>
    </ConfigProvider>
  );
}

export default App;

• 但是问题随之而来 ， 因为时间选择器返回的数据格式是这样的

  
  日期返回格式

• 而我们想要的格式是 'YYYY-MM-DD'

解决方案：

通过引入的dayjs进行处理

import dayjs from "dayjs";

dayjs(value).format("YYYY-MM-DD")  

结语

• 正是因为默认语言的可配置性，可以将系统设置成多语言系统
• 希望各位朋友能精通React ，这里有react 的 demo ，望多指教 。
  码云地址：react-question-v6
  码云地址 ：react-question-vite

参考文档：Day.js 常用方法