从 lab 迁移

Material UI 日期和时间选择器现在已在 MUI X 上提供！

简介

本文档是关于将站点的选择器从 @mui/lab 迁移到 @mui/x-date-pickers 或 @mui/x-date-pickers-pro 的参考指南。此迁移是关于所使用的 npm 包，它不会影响应用程序中组件的行为。您可以在公告博客文章中找到我们朝着这个方向发展的原因。

许可

我们的大部分组件仍然是 MIT 许可证，可以在 @mui/x-date-pickers 中免费访问。

范围选择器组件：DateRangePicker、DateRangePickerDay、DesktopDateRangePicker、MobileDateRangePicker 和 StaticDateRangePicker 在我们的文档中被标记为“专为 MUI X Pro 设计”，现在是 MUI X Pro 的一部分。

如果您正在使用这些组件之一，您将需要购买 Pro 许可证才能迁移到 @mui/x-date-pickers-pro（有关更多信息，请参阅定价页面）。

迁移步骤

1. 安装 MUI X 包

社区计划

Pro 计划

当您购买商业许可证后，您将通过电子邮件收到许可证密钥。您必须在渲染第一个组件之前设置许可证密钥。

import { LicenseInfo } from '@mui/x-license-pro';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

在许可页面了解更多信息。

2. 运行代码修改

我们准备了一个 codemod 来帮助您迁移代码库。

您可以在选择 <path> 参数时，在特定文件、文件夹或整个代码库上运行它。

npx @mui/codemod v5.0.0/date-pickers-moved-to-x <path>

这将转换如下导入

-import DatePicker from '@mui/lab/DatePicker';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';

-import DateRangePicker from '@mui/lab/DateRangePicker';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

-import { DatePicker, DateRangePicker } from '@mui/lab';
+import { DatePicker } from '@mui/x-date-pickers'; // DatePicker is also available in `@mui/x-date-pickers-pro`
+import { DateRangePicker } from '@mui/x-date-pickers-pro';

社区计划的组件（如 <DatePicker />）可以从 @mui/x-date-pickers-pro 和 @mui/x-date-pickers 导入。日期适配器（如 AdapterDayjs）只能从 @mui/x-date-pickers/[adapterName] 导入。

3. 处理 alpha 中引入的重大更改

在从 @mui/lab 迁移到 MUI X 期间，我们专注于增强稳定性和开发者体验。一些 API 得到了改进，使其更加连贯和可定制。

在从 @mui/x-date-pickers 5.0.0-alpha.0 迁移到最新的 v5.0.0 之前，请检查完整的 API 更改列表。

属性重命名

disableCloseOnSelect 属性已被新的 closeOnSelect 属性替换，后者具有相反的行为。默认行为保持不变（在桌面端在最后一步之后关闭，但在移动端不关闭）。

 // If you don't want to close after the last step
-<DatePicker disableCloseOnSelect={false} />
+<DatePicker closeOnSelect />

 // If you want to close after the last step
-<DatePicker disableCloseOnSelect />
+<DatePicker closeOnSelect={false} />

MonthPicker、YearPicker 和 DayPicker 的属性已重新设计，使其在独立使用时更加一致。

• MonthPicker：onMonthChange 属性已被移除，您可以使用 onChange 代替，因为每次更改都是月份更改。
• YearPicker：onYearChange 属性已被移除，您可以使用 onChange 代替，因为每次更改都是年份更改。
• DayPicker：isDateDisabled 属性已被移除，您现在可以使用与其他组件相同的验证属性（maxDate、minDate、shouldDisableDate、disableFuture 和 disablePast）。

翻译

用于翻译的属性已被弃用或移除，取而代之的是类似于数据表格使用的全局本地化。我们已经有社区提供的十种语言环境。（谢谢！）

为 ActionBar 使用插槽

与操作栏按钮相关的属性（clearable、showTodayButton、cancelText、okText）已被移除。

要决定必须显示哪些按钮以及以什么顺序显示，您现在可以使用 actionBar 组件插槽属性的 actions 属性。

<DatePicker
  componentsProps={{
    // The actions will be the same between desktop and mobile
    actionBar: {
      actions: ['clear'],
    },
    // The actions will be different between desktop and mobile
    actionBar: ({ wrapperVariant }) => ({
      actions: wrapperVariant === 'desktop' ? [] : ['clear'],
    }),
  }}
/>

内置的 ActionBar 组件支持 4 种不同的操作：'clear'、'cancel'、'accept' 和 'today'。默认情况下，选择器将在移动设备上渲染取消和接受按钮，在桌面设备上不执行任何操作。

如果您需要其他操作，您可以将自己的组件提供给 ActionBar 组件插槽

<DatePicker components={{ ActionBar: CustomActionBar }} />