已翻译组件
日期和时间选择器支持多语言翻译。
与所有 MUI X 组件一样，您可以修改日期和时间选择器中的文本和翻译。您可以在 GitHub 仓库的源代码中找到所有支持的翻译键。
MUI X 的默认区域设置是英语（美国）。如果您想使用其他区域设置，请按照以下说明操作。
全局设置翻译
使用主题
要翻译来自 @mui/x-date-pickers 和 @mui/x-date-pickers-pro 的所有组件，请从 @mui/x-date-pickers 导入区域设置（请参阅下面支持的区域设置列表）。
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { deDE } from '@mui/x-date-pickers/locales';
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
deDE, // use 'de' locale for UI texts (start, next month, ...)
);
function App({ children }) {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
请注意，createTheme 接受任意数量的参数。如果您已经在使用核心组件的翻译或数据网格的翻译，则可以添加 deDE 作为新参数。
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { deDE as dataGridDeDE } from '@mui/x-data-grid';
import { deDE as coreDeDE } from '@mui/material/locale';
import { deDE } from '@mui/x-date-pickers/locales';
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
deDE, // x-date-pickers translations
dataGridDeDE, // x-data-grid translations
coreDeDE, // core translations
);
function App({ children }) {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
使用 LocalizationProvider
如果您想在不使用 createTheme 和 ThemeProvider 的情况下传递语言翻译，您可以直接从 @mui/x-date-pickers 或 @mui/x-date-pickers-pro 包加载语言翻译，并将它们传递给 LocalizationProvider。
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { deDE } from '@mui/x-date-pickers/locales';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
<LocalizationProvider
localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
>
<DatePicker />
</LocalizationProvider>;
本地设置翻译
您还可以自定义单个组件的翻译。
如果您想自定义特定组件上的一些翻译，您可以使用我们所有选择器公开的 localeText 属性。
<DatePicker localeText={{ clearButtonLabel: 'Empty' }} />
支持的区域设置
| 区域设置 | BCP 47 语言标签 | 导入名称 | 完成度 | 源文件 |
|---|---|---|---|---|
| 孟加拉语 | bn-BD | bnBD | 完成 🎉 | 编辑 |
| 巴斯克语 | eu | eu | 37/50 | 编辑 |
| 白俄罗斯语 | be-BY | beBY | 35/50 | 编辑 |
| 保加利亚语 | bg-BG | bgBG | 完成 🎉 | 编辑 |
| 加泰罗尼亚语 | ca-ES | caES | 完成 🎉 | 编辑 |
| 中文（香港） | zh-HK | zhHK | 完成 🎉 | 编辑 |
| 中文（简体） | zh-CN | zhCN | 完成 🎉 | 编辑 |
| 中文（台湾） | zh-TW | zhTW | 完成 🎉 | 编辑 |
| 克罗地亚语 | hr-HR | hrHR | 完成 🎉 | 编辑 |
| 捷克语 | cs-CZ | csCZ | 完成 🎉 | 编辑 |
| 丹麦语 | da-DK | daDK | 完成 🎉 | 编辑 |
| 荷兰语 | nl-NL | nlNL | 完成 🎉 | 编辑 |
| 芬兰语 | fi-FI | fiFI | 完成 🎉 | 编辑 |
| 法语 | fr-FR | frFR | 完成 🎉 | 编辑 |
| 德语 | de-DE | deDE | 完成 🎉 | 编辑 |
| 希腊语 | el-GR | elGR | 36/50 | 编辑 |
| 希伯来语 | he-IL | heIL | 完成 🎉 | 编辑 |
| 匈牙利语 | hu-HU | huHU | 完成 🎉 | 编辑 |
| 冰岛语 | is-IS | isIS | 36/50 | 编辑 |
| 意大利语 | it-IT | itIT | 完成 🎉 | 编辑 |
| 日语 | ja-JP | jaJP | 完成 🎉 | 编辑 |
| 哈萨克语 | kz-KZ | kzKZ | 35/50 | 编辑 |
| 韩语 | ko-KR | koKR | 49/50 | 编辑 |
| 马其顿语 | mk | mk | 37/50 | 编辑 |
| 挪威语（博克马尔语） | nb-NO | nbNO | 完成 🎉 | 编辑 |
| 挪威语（尼诺斯克语） | nn-NO | nnNO | 完成 🎉 | 编辑 |
| 波斯语 | fa-IR | faIR | 完成 🎉 | 编辑 |
| 波兰语 | pl-PL | plPL | 40/50 | 编辑 |
| 葡萄牙语 | pt-PT | ptPT | 完成 🎉 | 编辑 |
| 葡萄牙语（巴西） | pt-BR | ptBR | 完成 🎉 | 编辑 |
| 罗马尼亚语 | ro-RO | roRO | 完成 🎉 | 编辑 |
| 俄语 | ru-RU | ruRU | 完成 🎉 | 编辑 |
| 斯洛伐克语 | sk-SK | skSK | 35/50 | 编辑 |
| 西班牙语 | es-ES | esES | 完成 🎉 | 编辑 |
| 瑞典语 | sv-SE | svSE | 完成 🎉 | 编辑 |
| 土耳其语 | tr-TR | trTR | 36/50 | 编辑 |
| 乌克兰语 | uk-UA | ukUA | 完成 🎉 | 编辑 |
| 乌尔都语（巴基斯坦） | ur-PK | urPK | 28/50 | 编辑 |
| 越南语 | vi-VN | viVN | 完成 🎉 | 编辑 |
您可以在 GitHub 仓库中找到源代码。
要创建您自己的翻译或自定义英文文本，请将此文件复制到您的项目中，进行任何必要的更改，并从那里导入区域设置。请注意，日期和时间选择器组件的这些翻译取决于整个库的本地化策略。
在插槽和子组件中访问翻译
您可以使用 usePickersTranslations hook 在您的自定义组件中访问翻译。
import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
const translations = usePickersTranslations();