已翻譯元件
日期和時間選擇器支援語言之間的翻譯。
與所有 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();