從 @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"

有許多變更，請小心，確保您的測試和建置通過。如果您對日期選擇器有進階用法，則重新編寫它可能會更簡單。

如果您發現有改進本指南的機會，請開啟 pull request。