從實驗室遷移

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. 執行程式碼修改

我們準備了一個程式碼修改來幫助您遷移您的程式碼庫。

當選擇 <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 變更列表。

Props 重新命名

disableCloseOnSelect prop 已被新的 closeOnSelect prop 取代，後者具有相反的行為。預設行為保持不變 (在桌面上在最後一步後關閉，但在行動裝置上則不關閉)。

 // 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 的 props 已經過重新設計，使其更適合獨立使用。

• MonthPicker：onMonthChange prop 已被移除，您可以改用 onChange，因為每個變更都是月份變更。
• YearPicker：onYearChange prop 已被移除，您可以改用 onChange，因為每個變更都是年份變更。
• DayPicker：isDateDisabled prop 已被移除，您現在可以使用與其他組件相同的驗證 props (maxDate、minDate、shouldDisableDate、disableFuture 和 disablePast)。

翻譯

翻譯的 Props 已被棄用或移除，取而代之的是類似 Data Grid 使用的全域本地化。我們已經有社群提供的十種語言環境。(謝謝你們！)

使用 slot 作為 ActionBar

與操作欄按鈕相關的 props (clearable、showTodayButton、cancelText、okText) 已被移除。

為了決定必須顯示哪些按鈕以及以何種順序顯示，您現在可以使用 actionBar 組件 slot props 的 actions prop。

<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 組件 slot

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