从 @material-ui/pickers 迁移

@material-ui/pickers 已移动到 @mui/lab。

本指南概述了从 pickers v3.2.10 更改的核心概念。

安装

如果尚未安装，您需要安装 @mui/lab 包。⚠️ 确保您已安装 v5.0.0-alpha.30 到 v5.0.0-alpha.89（包括两者）之间的版本。

导入

不再发布选择器的 keyboard 版本。移动和桌面选择器的所有版本都实现了键盘输入以提高可访问性。

-import { KeyboardDatePicker } from '@material-ui/pickers';
+import DatePicker from '@mui/lab/DatePicker';

-<KeyboardDatePicker />
+<DatePicker />

此外，这些被移动到不同的导入中，而不是提供 variant 属性，这意味着如果您仅使用桌面选择器，则捆绑包将不包含 Dialog。

<DesktopDatePicker /> – 仅桌面视图。
<MobileDatePicker /> – 仅移动视图。
<DatePicker /> – 根据用户指针偏好设置的移动或桌面视图。
<StaticDatePicker /> – 选择器视图本身，没有输入或任何其他包装器。

-import { DatePicker } from '@material-ui/pickers';
+import DesktopDatePicker from '@mui/lab/DesktopDatePicker';

-<DatePicker variant="inline" />
+<DesktopDatePicker />

相同的约定适用于 TimePicker – <DesktopTimePicker> 和 <MobileTimePicker />。

MuiPickersUtilsProvider

MuiPickersUtilsProvider 已删除，取而代之的是 LocalizationProvider。此外，选择器不再需要您手动安装 date-io 适配器。所有内容都包含在 lab 中。

❌ 之前

import AdapterDateFns from '@date-io/date-fns';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';

✅ 之后

import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';


function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      ...
    </LocalizationProvider>
  )
);

渲染输入

我们引入了一个新的必需的 renderInput 属性。这简化了使用非 Material UI 文本字段输入组件。

<DatePicker renderInput={(props) => <TextField {...props} />} />
<TimePicker renderInput={(props) => <TextField {...props} />} />

以前，属性分布在 <TextField /> 组件上。从现在开始，您将需要使用新的 renderInput 属性来提供这些属性

 <DatePicker
-  label="Date"
-  helperText="Something"
+  renderInput={props => <TextField label="Date" helperText="Something" /> }
 />

状态管理

选择器的状态/值管理逻辑已从头开始重写。现在，当日期选择器的每个视图结束时，选择器将调用 onChange 属性。onError 处理程序也完全不同。仔细检查您与表单集成的选择器，因为表单集成问题可能很微妙。

无需必需的掩码

不再需要掩码。此外，如果您提供的掩码无效，选择器将忽略该掩码，并允许任意输入。

<DatePicker
  mask="mm"
  value={new Date()}
  onChange={console.log}
  renderInput={(props) => (
    <TextField {...props} helperText="invalid mask" />
  )}
/>

<DatePicker
  value={new Date()}
  onChange={console.log}
  renderInput={(props) => (
    <TextField {...props} helperText="valid mask" />
  )}
/>

以及更多

 <DatePicker
-  format="DD-MM-YYYY"
+  inputFormat="DD-MM-YYYY"

有很多更改，请务必小心，确保您的测试和构建通过。如果您对日期选择器有高级用法，则重写它可能会更简单。

如果您发现改进指南的机会，请打开一个拉取请求。