日期和时间选择器 - 入门指南

安装日期和时间选择器包并设置您的日期库以开始构建。

安装

安装基础包（可以是免费的 Community 版本或付费的 Pro 版本）以及必需的第三方日期库。 Pickers 目前支持 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 中，该组件会包裹您的 Picker 组件。

为每个受支持的库都提供了适配器，并且所有适配器都由 @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 键开始编辑