Matarialize中文技术社区-使用 Material-UI 的 DatePicker 组件详解

使用 Material-UI 的 DatePicker 组件详解

smartzeng 2024-11-04 21:51:42

100 DatePicker 专栏

Material-UI 是一个强大的 React UI 库，提供了一系列组件来帮助开发者构建现代化、响应式的用户界面。在这篇博客中，我们将深入探讨 DatePicker 组件的用法，涵盖其所有的属性、方法，以及如何与其他组件结合使用。我们还将提供详细的示例代码，帮助您更好地理解和实现该组件的功能。

1. 什么是 DatePicker 组件？

DatePicker 组件是一个用于选择日期的输入组件。它提供了一个用户友好的日历界面，允许用户以直观的方式选择日期。通过 DatePicker，用户可以轻松输入和选择日期，同时确保输入的格式正确。

2. 安装 Material-UI 日期和时间选择器

在使用 DatePicker 组件之前，需要确保已安装 Material-UI 的核心库和日期时间选择器库：

npm install @mui/material @emotion/react @emotion/styled @mui/x-date-pickers

3. 基本用法

3.1 导入 DatePicker 组件

在你的 React 组件中导入 DatePicker 组件：

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

3.2 创建基本的 DatePicker

下面是一个简单的示例，展示如何使用 DatePicker 组件：

const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <DatePicker
          label="Select Date"
          value={selectedDate}
          onChange={(newValue) => setSelectedDate(newValue)}
          renderInput={(params) => <TextField {...params} />}
        />
      </Box>
    </LocalizationProvider>
  );
};

export default MyDatePicker;

4. DatePicker 组件的属性

4.1 主要属性

value: 当前选中的日期，类型为 Date 或 null。
onChange: 当用户选择新日期时调用的回调函数，接收新日期作为参数。
renderInput: 自定义渲染输入组件的方法，通常用于与 Material-UI 的 TextField 结合使用。
label: 输入框的标签文本。
inputFormat: 自定义输入的日期格式，默认格式为 MM/dd/yyyy。
minDate: 设置可以选择的最小日期。
maxDate: 设置可以选择的最大日期。
disablePast: 禁止选择过去的日期。
disableFuture: 禁止选择未来的日期。
renderDay: 自定义渲染日历中的每一天。

4.2 示例：设置日期范围

我们可以使用 minDate 和 maxDate 属性来限制用户选择的日期范围：

const DatePickerWithRange = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Select Date"
        value={selectedDate}
        onChange={(newValue) => setSelectedDate(newValue)}
        minDate={new Date(2020, 0, 1)} // 最小日期为 2020 年 1 月 1 日
        maxDate={new Date(2025, 11, 31)} // 最大日期为 2025 年 12 月 31 日
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

5. 高级用法

5.1 自定义输入格式

可以使用 inputFormat 属性来自定义日期的输入格式：

const CustomFormatDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Select Date"
        value={selectedDate}
        onChange={(newValue) => setSelectedDate(newValue)}
        inputFormat="yyyy-MM-dd" // 自定义输入格式
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

5.2 结合日期选择器与输入框

您可以在输入框旁边添加一个按钮来打开日历，这样可以更好地控制日期选择：

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

const DatePickerWithButton = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const [open, setOpen] = useState(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <DatePicker
          label="Select Date"
          value={selectedDate}
          onChange={(newValue) => {
            setSelectedDate(newValue);
            setOpen(false);
          }}
          renderInput={(params) => <TextField {...params} />}
          open={open}
          onOpen={() => setOpen(true)}
          onClose={() => setOpen(false)}
        />
        <Button onClick={() => setOpen(true)}>Open Calendar</Button>
      </Box>
    </LocalizationProvider>
  );
};

6. 自定义日历的渲染

6.1 使用 `renderDay`

您可以自定义日历中每一天的显示样式，使用 renderDay 属性：

import { isSameDay } from 'date-fns';

const CustomRenderDay = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const renderCustomDay = (date, selectedDates, pickersDayProps) => {
    const isSelected = isSameDay(date, selectedDate);
    return (
      <div
        style={{
          backgroundColor: isSelected ? '#3f51b5' : 'transparent',
          color: isSelected ? 'white' : 'black',
          borderRadius: '50%',
          width: '30px',
          height: '30px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {date.getDate()}
      </div>
    );
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Select Date"
        value={selectedDate}
        onChange={(newValue) => setSelectedDate(newValue)}
        renderInput={(params) => <TextField {...params} />}
        renderDay={renderCustomDay}
      />
    </LocalizationProvider>
  );
};