Material UI 框架之 Date Picker 组件详解

person  smartzeng    watch_later 2024-10-19 21:48:33
visibility 895    class Date Picker    bookmark 专栏

Material UI 是一个功能强大的 React UI 框架，其中包含了丰富的 UI 组件库，可以帮助开发者快速构建现代化的响应式网页应用。在这些组件中，Date Picker（日期选择器）组件用于允许用户选择日期，广泛应用于表单和输入场景中。在本文中，我们将详细介绍 Material UI 的 Date Picker 组件，涵盖其所有属性、方法，并结合其他组件的使用，提供多种示例代码。

1. Date Picker 的基本用法

1.1 安装依赖

在使用 Date Picker 之前，我们需要先安装 Material UI 相关的包。由于日期选择器依赖于日期库，我们也需要引入 @mui/x-date-pickers 和 date-fns：

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

1.2 引入和使用

安装好依赖之后，开始使用 DatePicker 组件。以下是最基本的日期选择器示例：

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

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>
  );
}

在这个例子中：

  • LocalizationProvider 组件用来为 DatePicker 提供日期库的适配器，这里我们使用 AdapterDateFns，也可以使用 Moment.js 或 Luxon 等其他日期库。
  • DatePicker 组件用于渲染日期选择器，label 属性为输入框提供了说明。
  • renderInput 用于自定义渲染输入框，通常使用 TextField 来渲染。

2. Date Picker 的核心属性和方法

DatePicker 组件有许多实用的属性和方法，以下是一些核心功能的详细说明。

2.1 value 和 onChange 属性

  • value：该属性用于设置或获取当前选中的日期值。它可以是 Date 类型或者 null。
  • onChange：当用户选择日期时触发的回调函数，接收用户选择的日期作为参数。
<DatePicker
  label="选择日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
/>

2.2 minDate 和 maxDate

  • minDate：用于指定用户可以选择的最小日期。
  • maxDate：用于指定用户可以选择的最大日期。
<DatePicker
  label="选择日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  minDate={new Date('2023-01-01')}
  maxDate={new Date('2023-12-31')}
/>

这个例子中，用户只能选择 2023 年的日期。

2.3 disablePast 和 disableFuture

  • disablePast：禁用所有过去的日期。
  • disableFuture：禁用所有未来的日期。
<DatePicker
  label="选择日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  disablePast
/>

在上面的例子中，用户只能选择今天及以后的日期。

2.4 openTo 和 views

  • openTo：指定日期选择器打开时默认显示的视图（年份、月份或日期）。
  • views：指定用户可选择的视图，例如年份、月份和日期。
<DatePicker
  label="选择日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  openTo="year"
  views={['year', 'month', 'day']}
/>

在这个例子中，日期选择器会先打开年份视图，用户可以依次选择年份、月份和日期。

2.5 disableHighlightToday 和 showTodayButton

  • disableHighlightToday：禁用对今天日期的高亮显示。
  • showTodayButton：显示 “今天” 按钮，允许用户快速选择当天日期。
<DatePicker
  label="选择日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  showTodayButton
/>

此示例展示了带有“今天”按钮的日期选择器。

2.6 renderDay

  • renderDay：自定义日期选择器中每个日期的渲染方式。
<DatePicker
  label="选择日期"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  renderDay={(day, selectedDate, isInCurrentMonth, dayComponent) => {
    return <div style={{ backgroundColor: isInCurrentMonth ? 'lightblue' : 'white' }}>{dayComponent}</div>;
  }}
/>

通过 renderDay，你可以自定义每个日期单元格的显示样式。

3. 与其他组件的结合使用

3.1 与表单组件结合

通常，DatePicker 需要与表单一起使用。以下是 DatePicker 和 TextField 结合的表单示例：

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`选中的日期: ${selectedDate}`);
  };

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

3.2 与 Grid 布局结合

Grid 组件是 Material UI 中常用的布局工具，以下示例展示了如何将 DatePicker 与 Grid 结合使用，实现响应式布局：

import Grid from '@mui/material/Grid';

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

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <DatePicker
            label="开始日期"
            value={selectedDate}
            onChange={(newValue) => setSelectedDate(newValue)}
            renderInput={(params) => <TextField {...params} />}
          />
        </Grid>
        <Grid item xs={6}>
          <DatePicker
            label="结束日期"
            value={selectedDate}
            onChange={(newValue) => setSelectedDate(newValue)}
            renderInput={(params) => <TextField {...params} />}
          />
        </Grid>
      </Grid>
    </LocalizationProvider>
  );
}

4. 高级用法：国际化和自定义适配器

4.1 国际化

Material UI 的 DatePicker 支持多语言环境，通过 LocalizationProvider 和不同的日期库适配器（如 date-fns、moment、luxon）来实现国际化。以中文为例：

import { zhCN } from 'date-fns/locale';

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

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

通过设置 locale 属性，你可以将日期选择器切换到不同语言环境。

4.2 自定义适配器

Material UI 支持不同的日期库适配器，以下是使用 Moment.js 的示例：

npm install moment @mui/x-date-pickers/AdapterMoment

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

export default function MomentDate

Picker() {
  const [selectedDate, setSelectedDate] = React.useState(null);

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

5. 总结

DatePicker 组件是 Material UI 提供的强大日期选择器，它不仅提供了丰富的自定义功能，还可以与表单、布局和国际化组件灵活结合。在实际项目中，掌握 DatePicker 的这些核心属性和方法，可以大大提高开发效率，打造出更符合用户体验的应用。

chat评论区
评论列表
作者信息

像向日葵一样向着太阳

热门专栏

Vue Material 框架中的 Dialog 组件使用详解

在网页中使用 Materialize 实现中文日期选择器

MaterializeCSS轮播组件：构建动态网页内容的利器

深入了解 Material UI 的 MobileDateRangePicker API 使用

使用 Materialize 实现图文列表布局

在网页中使用 Materialize 实现日期选择器

Material UI 框架中 MobileDatePicker API 的全面使用指南

深入解析 Material UI 的 `LocalizationProvider API` 使用指南

深入解析 Material UI 的 `DigitalClock API` 使用指南

深入解析 Material UI 的 `DesktopDateRangePicker API` 使用指南

menu