从 @mui-pickers 进行迁移

@mui/pickers 现在已经整合进了 @mui/lab。

This guide is an overview of the core concepts that were changed from pickers v3.2.10.

安装

You need to install the @mui/lab package if it's not already installed. ⚠️ Make sure you have installed the latest version, "@mui/lab": ^5.0.0-alpha.30" or above.

导入

The keyboard version of pickers is no longer published. All versions of mobile and desktop pickers implement keyboard input for accessibility.

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

-<KeyboardDatePicker />
+<DatePicker />

Also, instead of providing a variant prop, these were moved to different imports, meaning that your bundle won't include Dialog if you are using only the desktop picker.

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

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

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

The same convention applies to TimePicker – <DesktopTimePicker> and <MobileTimePicker />.

MuiPickersUtilsProvider

The MuiPickersUtilsProvider was removed in favor of LocalizationProvider. Also, pickers do not require you to install date-io adapters manually. Everything is included with the lab.

❌ Before:

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

✅ After:

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


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

渲染输入

We introduced a new required renderInput prop. This simplifies using non-MUI text field input components.

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

Previously, props were spread on the <TextField /> component. From now on you will need to use the new renderInput prop to provide these:

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

状态管理

The state/value management logic for pickers was rewritten from scratch. Pickers will now call the onChange prop when each view of the date picker ends is completed. The onError handler is also completely different. Triple-check your pickers with forms integration, because form-integration issues can be subtle.

无必填的掩码（mask）

Mask is no longer required. Also, if your provided mask is not valid, pickers will just ignore the mask, and allow arbitrary input.

<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" />
  )}
/>