日期與時間選取器 - 開始使用

安裝日期與時間選取器套件並設定您的日期函式庫以開始建構。

安裝

安裝基礎套件（可以是免費的 Community 版本或付費的 Pro 版本）以及必要的第三方日期函式庫。選取器目前支援 Day.js、date-fns、Luxon 和 Moment.js。

透過下方的切換按鈕選擇您的套件和管理器，然後執行提供的命令進行安裝

方案

日期函式庫

npm install @mui/x-date-pickers

npm install dayjs

同層級依賴

Material UI

日期與時間選取器具有對 @mui/material 的同層級依賴。如果您尚未使用它，請使用以下命令安裝它

npm install @mui/material @emotion/react @emotion/styled

React

react 和 react-dom 也是同層級依賴

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

日期函式庫轉接器設定

若要將您選擇的日期函式庫與日期與時間選取器整合，您需要將對應的轉接器插入到包裹您的選取器元件的 LocalizationProvider 中。

為每個支援的函式庫提供轉接器，並且所有轉接器都由 @mui/x-date-pickers 和 @mui/x-date-pickers-pro 匯出—例如，AdapterDayjs，本文檔在 Day.js 整合中通篇使用。

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';

LocalizationProvider

LocalizationProvider 元件由 @mui/x-date-pickers 和 @mui/x-date-pickers-pro 匯出

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';

方案

日期函式庫

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'

function App({ children }) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      {children}
    </LocalizationProvider>
  );
}

渲染您的第一個元件

為了確認一切設定正確，請嘗試渲染一個基本的日期選取器元件

<DatePicker />

<DatePicker />

按下 Enter 鍵開始編輯