日期格式和本地化
日期和时间选择器支持来自不同语言环境的格式。
开始使用
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 语言（阿拉伯语）与某些日期和时间选择器组件一起使用。