Localize antd DatePicker to Chinese via ConfigProvider

Adds a Providers client component that wraps the app in ConfigProvider
locale=zhCN and sets dayjs zh-cn locale, so the date-filter RangePicker
shows Chinese weekdays/months (and other antd components localize too).
Framework-native; no custom control. Not deployed.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Misaka_Company
2026-06-18 10:28:12 +08:00
parent 933b779a10
commit dca5335f9a
2 changed files with 17 additions and 1 deletions

View File

@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import "./globals.css";
import { Providers } from "./providers";
export const metadata: Metadata = {
title: "Web Table - 压力表合同生产数据",
@@ -13,7 +14,9 @@ export default function RootLayout({
}>) {
return (
<html lang="zh-CN">
<body>{children}</body>
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}

13
src/app/providers.tsx Normal file
View File

@@ -0,0 +1,13 @@
"use client";
import { ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
// antd v6 DatePicker 基于 dayjs设置 dayjs 中文 locale 后,日期面板的月份/星期才会显示中文。
dayjs.locale("zh-cn");
export function Providers({ children }: { children: React.ReactNode }) {
return <ConfigProvider locale={zhCN}>{children}</ConfigProvider>;
}