跳到内容
返回博客

日期和时间选择器正在迁移到 MUI X

Flavien Delangle

@flaviendelangle
+

经过实验室超过 18 个月的开发，日期和时间选择器组件已找到新的归宿，成为 MUI X 的一部分。这意味着我们将投入更多时间和精力来开发这些复杂的组件，以更好地满足您和用户的需求。

TL;DR

什么是日期和时间选择器？

日期和时间选择器是界面控件，使用户能够从菜单中选择日期（或时间）。

Date and Time Picker component

使用默认 Material UI 设计的日期和时间选择器

常见的设计模式包括文本输入框、下拉列表、日历、时间线和移动设备上的滚动选择器。

用户可能需要选择单个日期/时间，或一个范围。

什么是 MUI X？

MUI X 是为复杂用例构建的先进组件的集合。

与依赖开源社区支持的 MUI Core 库不同，MUI X 组件需要多名全职开发人员专注于工程和持续维护。

MUI X 组件在两种许可下可用

  • MUI X 采用 MIT 许可证，因此可以免费使用。
  • MUI X Pro 包含最先进的功能，并采用商业许可证。

为什么日期和时间选择器被移至 MUI X？

日期和时间选择器 UI 元素表面上看起来很简单，但工程实现却出乎意料地复杂。

当日期和时间选择器组件准备好离开实验室时，我们面临一个选择：它们是应该保留在 MUI Core 库中，还是应该成为 MUI X 的一部分？

鉴于这些组件的复杂性，我们决定它们最能受益于 X 团队的专注投入。

通过商业许可证提供更高级的组件包，我们可以继续扩大团队，以更好地满足您的需求。

日期和时间选择器组件现在以两个软件包提供

  • @mui/x-date-pickers 具有 MIT 许可证，它包含所有开源组件
  • @mui/x-date-pickers-pro 具有 商业许可证，它包含所有 MIT 和商业许可的组件

哪些组件仅在 Pro 软件包中可用？

日期范围组件只能与商业许可证一起使用。

所有其他日期和时间选择器组件都在 mui/x-date-pickers 中提供，并将永久保持 MIT 许可证和免费。

如何购买商业许可证？

访问 MUI 商店购买商业许可证。

如何迁移？

按照迁移步骤，通过更新软件包名称并将默认导出更改为命名导出

-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';
+import { DateRangePicker } from '@mui/x-date-pickers-pro';
 // DatePicker is also available in `@mui/x-date-pickers-pro`

我们准备了一个 codemod 来帮助您将代码库从 @mui/lab 迁移到 @mui/x-date-pickers 或 @mui/x-date-pickers-pro

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

日期和时间选择器文档在哪里？

您可以在 MUI X 文档中找到选择器组件的文档。

日期和时间选择器的下一步是什么？

目前，@mui/x-date-pickers 和 @mui/x-date-pickers-pro 处于 alpha 阶段。我们的下一个目标是致力于这些组件的稳定性和 API 一致性，以准备稳定版本。