日期格式和本地化
日期和時間選取器支援來自不同地區設定的格式。
開始使用
MUI X 的預設地區設定為英文（美國）。如果您想使用其他地區設定，請按照以下指示操作。
設定自訂地區設定
使用 dayjs
對於 dayjs，匯入地區設定，然後將其名稱傳遞給 LocalizationProvider
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/de';
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
{children}
</LocalizationProvider>;
使用 date-fns
對於 date-fns，匯入地區設定並將其傳遞給 LocalizationProvider
// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// with date-fns v3.x or v4.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
// with date-fns v2.x
import de from 'date-fns/locale/de';
// with date-fns v3.x or v4.x
import { de } from 'date-fns/locale/de';
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
{children}
</LocalizationProvider>;
使用 luxon
對於 luxon，將地區設定名稱傳遞給 LocalizationProvider
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="de">
{children}
</LocalizationProvider>;
使用 moment
對於 moment，匯入地區設定，然後將其名稱傳遞給 LocalizationProvider
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import 'moment/locale/de';
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de">
{children}
</LocalizationProvider>;
子午線 — 12 小時/24 小時格式
所有時間和日期時間元件都會自動調整為地區設定的時間設定，即 12 小時或 24 小時格式。您可以使用 ampm 屬性覆寫預設設定
自訂格式
以下屬性接收的格式取決於您使用的日期程式庫。請參閱每個程式庫的文件以取得完整的格式表
自訂欄位格式
欄位具有預設格式，該格式取決於正在使用的選取器、啟用的檢視以及 12 小時/24 小時格式。
如果此預設格式不適合您，您可以使用 format 屬性來自訂它
欄位支援的格式
某些格式可能尚未受到欄位支援。例如，它們不支援年份中的日或季度。
以下是目前支援的格式列表
年份
- ✅ 2 位數值（例如：
23） - ✅ 4 位數值（例如：
2023） - ❌ 具有序數的值（例如：
2023th）
- ✅ 2 位數值（例如：
月份
- ✅ 以 1 為基底的數字（例如：
08） - ✅ 多字母值（例如
Aug、August） - ❌ 單字母值（例如：
A），因為多個月份以相同的字母表示
- ✅ 以 1 為基底的數字（例如：
月份中的日
- ✅ 以 1 為基底的數字值（例如：
24） - ✅ 具有序數的以 1 為基底的數字值（例如：
24th）
- ✅ 以 1 為基底的數字值（例如：
星期中的日
- ✅ 以 0 為基底的數字值（例如：
03） - ✅ 以 1 為基底的數字值（例如：
04） - ✅ 多字母值（例如：
Tue、Tuesday） - ❌ 單字母值（例如：
T），因為一週中的多天以相同的字母表示
- ✅ 以 0 為基底的數字值（例如：
小時
- ✅ 以 0 為基底的 12 小時值（例如：
03） - ✅ 以 0 為基底的 24 小時值（例如：
15） - ❌ 以 1 為基底的值（例如：
24而不是00）
- ✅ 以 0 為基底的 12 小時值（例如：
分鐘
秒
子午線
如果您需要使用尚不支援的格式，請開啟 issue 描述您的確切用例。未來可能會支援一些新格式，具體取決於實作的複雜性。
尊重欄位中的前導零
預設情況下，欄位中呈現的值始終包含數字零，即使您的格式另有說明。您可以將 shouldRespectLeadingZeros 屬性設定為 true，強制欄位尊重您的格式資訊。
英文地區設定（預設）
德文地區設定
有關如何定義元件本地化的更多資訊，請查看已翻譯的元件頁面。
您可以根據需要自訂特定預留位置部分的翻譯。所有可用的預留位置翻譯方法及其參數都可在 原始碼檔案 中找到。如果您需要更細緻的控制，可以使用在 LocalizationProvider 或特定 Picker 元件上定義的 localeText 屬性覆寫它們。
常見的用例是將月份部分的預留位置變更為簡短字母形式（Jan、Feb 等）。預設翻譯實作可能不是您想要的，因此您可以覆寫它
<LocalizationProvider
dateAdapter={AdapterDayjs}
localeText={{
fieldMonthPlaceholder: (params) =>
params.contentType === 'digit' ? 'MM' : params.format,
}}
>
<DatePicker />
</LocalizationProvider>
自訂工具列格式
若要自訂工具列中使用的格式，請使用 toolbar 插槽的 toolbarFormat 屬性。
自訂星期幾格式
使用 dayOfWeekFormatter 自訂日曆標頭中的星期名稱。此屬性接受兩個參數，day（星期名稱的字串）和 date（日期程式庫格式的日期），並傳回要顯示的格式化字串。預設格式器僅保留名稱的第一個字母並將其大寫。
以下範例在日曆標頭中的每一天結尾新增一個點
自訂日曆標頭格式
若要自訂日曆標頭中使用的格式，請使用 calendarHeader 插槽的 format 屬性。
自訂一週的開始
日期和時間選取器使用您的日期程式庫提供的週設定。每個轉接器都使用其地區設定來定義一週的開始。
如果您的轉接器地區設定中定義的預設一週開始不是您想要的，您可以按照以下範例所示覆寫它。
使用 dayjs
對於 dayjs，請使用 updateLocale 外掛程式
import updateLocale from 'dayjs/plugin/updateLocale';
dayjs.extend(updateLocale);
// Replace "en" with the name of the locale you want to update.
dayjs.updateLocale('en', {
// Sunday = 0, Monday = 1.
weekStart: 1,
});
使用 date-fns
對於 date-fns，覆寫所用地區設定的 options.weekStartsOn
import { Locale } from 'date-fns';
// with date-fns v2.x
import enUS from 'date-fns/locale/en-US';
// with date-fns v3.x
import { enUS } from 'date-fns/locale/en-US';
const customEnLocale: Locale = {
...enUS,
options: {
...enUS.options,
// Sunday = 0, Monday = 1.
weekStartsOn: 1,
},
};
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={customEnLocale}>
使用 luxon
對於 luxon，請使用 Settings.defaultWeekSettings 物件
import { Settings, Info } from 'luxon';
Settings.defaultWeekSettings = {
// Sunday = 7, Monday = 1.
firstDay: 1,
// Makes sure we don't lose the other information from `defaultWeekSettings`
minimalDays: Info.getMinimumDaysInFirstWeek(),
weekend: Info.getWeekendWeekdays(),
};
使用 moment
對於 moment，請使用 moment.updateLocale 方法
import moment from 'moment';
// Replace "en" with the name of the locale you want to update.
moment.updateLocale('en', {
week: {
// Sunday = 0, Monday = 1.
dow: 1,
},
});
RTL 支援
支援由右至左的語言，例如阿拉伯語、波斯語或希伯來語。請依照本指南使用它們。
以下範例示範如何將 RTL 語言（阿拉伯語）與某些日期和時間選取器元件搭配使用。