Material UI 框架之 Date Picker 组件详解

class Date Picker

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

1. Date Picker 的基本用法

1.1 安装依赖

在使用 Date Picker 之前,我们需要先安装 Material UI 相关的包。由于日期选择器依赖于日期库,我们也需要引入 @mui/x-date-pickersdate-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.jsLuxon 等其他日期库。
  • DatePicker 组件用于渲染日期选择器,label 属性为输入框提供了说明。
  • renderInput 用于自定义渲染输入框,通常使用 TextField 来渲染。

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

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

2.1 valueonChange 属性

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

2.2 minDatemaxDate

  • 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 disablePastdisableFuture

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

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

2.4 openToviews

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

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

2.5 disableHighlightTodayshowTodayButton

  • 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 需要与表单一起使用。以下是 DatePickerTextField 结合的表单示例:

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 中常用的布局工具,以下示例展示了如何将 DatePickerGrid 结合使用,实现响应式布局:

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-fnsmomentluxon)来实现国际化。以中文为例:

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评论区
评论列表
menu