Matarialize中文技术社区-Material UI 框架：MUI X 日期和时间选择器使用指南

Material UI 框架：MUI X 日期和时间选择器使用指南

smartzeng 2024-10-18 09:29:13

1090 DatePicker,TimePicker 专栏

在现代应用中，日期和时间选择器是常用的 UI 组件，尤其是在表单输入和调度应用中。Material UI 提供了强大的日期和时间选择器组件，称为 MUI X 日期和时间选择器。这些组件不仅易于使用，而且高度可定制，能够满足多种需求。

本文将详细介绍 MUI X 日期和时间选择器的使用，包括所有属性和方法，并提供示例代码，帮助你更好地理解和应用这些组件。

1. MUI X 日期和时间选择器概述

MUI X 日期和时间选择器包含以下主要组件：

DatePicker: 日期选择器。
TimePicker: 时间选择器。
DateTimePicker: 日期和时间选择器。
LocalizationProvider: 组件，提供日期和时间的本地化支持。

1.1 安装

要使用 MUI X 日期和时间选择器，首先确保你已经安装了必要的依赖项：

npm install @mui/material @mui/x-date-pickers date-fns

1.2 导入组件

在你的 React 组件中导入所需的选择器和本地化提供者：

import * as React from 'react';
import { LocalizationProvider, DatePicker, TimePicker, DateTimePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import TextField from '@mui/material/TextField';

2. 基本使用示例

2.1 日期选择器示例

以下是如何使用 DatePicker 的基本示例。

export default function BasicDatePicker() {
  const [selectedDate, setSelectedDate] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="选择日期"
        value={selectedDate}
        onChange={(newValue) => setSelectedDate(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

2.2 时间选择器示例

以下是如何使用 TimePicker 的基本示例。

export default function BasicTimePicker() {
  const [selectedTime, setSelectedTime] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <TimePicker
        label="选择时间"
        value={selectedTime}
        onChange={(newValue) => setSelectedTime(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

2.3 日期和时间选择器示例

以下是如何使用 DateTimePicker 的基本示例。

export default function BasicDateTimePicker() {
  const [selectedDateTime, setSelectedDateTime] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        label="选择日期和时间"
        value={selectedDateTime}
        onChange={(newValue) => setSelectedDateTime(newValue)}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

3. 属性详解

3.1 公共属性

所有日期和时间选择器组件共享以下公共属性：

value: 当前选择的日期或时间，类型为 Date | null。
onChange: 当选择的日期或时间发生变化时触发的回调函数。
renderInput: 自定义输入组件的渲染，通常传入 TextField。

3.2 特定属性

DatePicker

label: 输入框的标签文本。
views: 定义用户可以选择的视图类型，例如 ['year', 'day']。
disableFuture: 布尔值，禁用选择未来的日期。

TimePicker

label: 输入框的标签文本。
ampm: 布尔值，启用 12 小时制。
disablePast: 布尔值，禁用选择过去的时间。

DateTimePicker

label: 输入框的标签文本。
views: 与 DatePicker 相同，定义可以选择的视图类型。
disableFuture: 布尔值，禁用选择未来的日期和时间。

4. 进阶用法

4.1 禁用日期和时间

可以通过设置 disablePast 或 disableFuture 属性来禁用不必要的日期或时间。

<DatePicker
  label="选择未来的日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  disablePast
  renderInput={(params) => <TextField {...params} />}
/>

4.2 自定义格式

使用 format 属性可以自定义显示的日期和时间格式。

<DatePicker
  label="选择日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  renderInput={(params) => <TextField {...params} />}
  inputFormat="yyyy/MM/dd"
/>

4.3 结合表单和按钮

在许多情况下，选择器需要与表单结合使用，以便用户可以提交选择的日期和时间。

export default function FormWithDatePickers() {
  const [selectedDate, setSelectedDate] = React.useState(null);
  const [selectedTime, setSelectedTime] = React.useState(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('选择的日期:', selectedDate);
    console.log('选择的时间:', selectedTime);
  };

  return (
    <form onSubmit={handleSubmit}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          label="选择日期"
          value={selectedDate}
          onChange={(newValue) => setSelectedDate(newValue)}
          renderInput={(params) => <TextField {...params} />}
        />
        <TimePicker
          label="选择时间"
          value={selectedTime}
          onChange={(newValue) => setSelectedTime(newValue)}
          renderInput={(params) => <TextField {...params} />}
        />
        <Button type="submit" variant="contained">提交</Button>
      </LocalizationProvider>
    </form>
  );
}

5. 结合其他组件实现复杂布局

可以将日期和时间选择器与其他 Material UI 组件结合使用，以创建复杂的用户界面。例如，使用 Grid 组件来布局选择器。

import { Grid, Button } from '@mui/material';

export default function GridLayoutWithDatePickers() {
  const [selectedDate, setSelectedDate] = React.useState(null);
  const [selectedTime, setSelectedTime] = React.useState(null);

  return (
    <Grid container spacing={2}>
      <Grid item xs={6}>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DatePicker
            label="选择日期"
            value={selectedDate}
            onChange={(newValue) => setSelectedDate(newValue)}
            renderInput={(params) => <TextField {...params} />}
          />
        </LocalizationProvider>
      </Grid>
      <Grid item xs={6}>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <TimePicker
            label="选择时间"
            value={selectedTime}
            onChange={(newValue) => setSelectedTime(newValue)}
            renderInput={(params) => <TextField {...params} />}
          />
        </LocalizationProvider>
      </Grid>
      <Grid item xs={12}>
        <Button variant="contained">提交</Button>
      </Grid>
    </Grid>
  );
}