React 日期选择器 Date Picker

引言

在现代 Web 应用中，日期选择器（Date Picker）是一个非常常见的组件，用于让用户方便地选择日期。React 生态系统中有许多优秀的日期选择器库，如 react-datepicker 和 antd。本文将从基础开始，逐步深入介绍如何在 React 应用中使用日期选择器，并探讨常见的问题、易错点及如何避免。

基础使用

安装 react-datepicker

首先，我们需要安装 react-datepicker 库。可以通过 npm 或 yarn 来安装：

npm install react-datepicker

或者

yarn add react-datepicker

基本用法

安装完成后，我们可以在 React 组件中使用 DatePicker 组件。以下是一个简单的示例：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const BasicDatePicker = () => {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div>
      <h1>基本日期选择器</h1>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
      />
    </div>
  );
};

export default BasicDatePicker;

在这个示例中，我们使用了 useState 钩子来管理日期状态，并通过 onChange 回调函数来更新状态。

高级用法

自定义样式

react-datepicker 提供了一些默认样式，但有时我们需要自定义样式以适应应用的设计。可以通过覆盖默认样式或使用 CSS-in-JS 库来实现这一点。

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './CustomDatePicker.css';

const CustomDatePicker = () => {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div>
      <h1>自定义日期选择器</h1>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        className="custom-datepicker"
        popperClassName="custom-popper"
      />
    </div>
  );
};

export default CustomDatePicker;

在 CustomDatePicker.css 文件中：

.custom-datepicker {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}

.custom-popper {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

限制可选日期

有时我们需要限制用户可以选择的日期范围，例如只能选择未来日期或某个特定范围内的日期。

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const LimitedDatePicker = () => {
  const [startDate, setStartDate] = useState(null);

  const minDate = new Date();
  const maxDate = new Date(minDate);
  maxDate.setFullYear(minDate.getFullYear() + 1);

  return (
    <div>
      <h1>限制日期选择器</h1>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        minDate={minDate}
        maxDate={maxDate}
        placeholderText="选择日期"
      />
    </div>
  );
};

export default LimitedDatePicker;

多日期选择

有些场景下，用户需要选择多个日期。react-datepicker 支持多日期选择功能。

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const MultiDatePicker = () => {
  const [dates, setDates] = useState([]);

  return (
    <div>
      <h1>多日期选择器</h1>
      <DatePicker
        selected={dates}
        onChange={(dates) => setDates(dates)}
        selectsRange
        startDate={dates[0]}
        endDate={dates[1]}
        inline
      />
    </div>
  );
};

export default MultiDatePicker;

常见问题与易错点

1. 样式冲突

问题：使用 react-datepicker 时，可能会遇到样式冲突，导致日期选择器显示不正常。

解决方案：确保正确引入 react-datepicker 的默认样式，并在必要时覆盖这些样式。可以使用 CSS 模块或 CSS-in-JS 库来管理样式。

2. 日期格式化

问题：默认情况下，react-datepicker 返回的日期对象可能不符合预期的格式。

解决方案：使用 moment.js 或 date-fns 等日期处理库来格式化日期。

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { format } from 'date-fns';

const FormattedDatePicker = () => {
  const [startDate, setStartDate] = useState(null);

  const handleDateChange = (date) => {
    const formattedDate = format(date, 'yyyy-MM-dd');
    console.log(formattedDate);
    setStartDate(date);
  };

  return (
    <div>
      <h1>格式化日期选择器</h1>
      <DatePicker
        selected={startDate}
        onChange={handleDateChange}
        placeholderText="选择日期"
      />
    </div>
  );
};

export default FormattedDatePicker;

3. 初始化值为空

问题：有时需要初始化日期选择器为空值，但默认情况下 react-datepicker 会显示当前日期。

解决方案：将 selected 属性设置为 null，并在 onChange 回调中处理空值。

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const NullableDatePicker = () => {
  const [startDate, setStartDate] = useState(null);

  const handleDateChange = (date) => {
    setStartDate(date || null);
  };

  return (
    <div>
      <h1>可为空的日期选择器</h1>
      <DatePicker
        selected={startDate}
        onChange={handleDateChange}
        placeholderText="选择日期"
      />
    </div>
  );
};

export default NullableDatePicker;

4. 性能问题

问题：在复杂的应用中，日期选择器可能会导致性能问题，尤其是在频繁更新状态时。

解决方案：使用 useCallback 和 useMemo 钩子来优化性能。确保 onChange 回调函数不会在每次渲染时重新创建。

import React, { useState, useCallback, useMemo } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const OptimizedDatePicker = () => {
  const [startDate, setStartDate] = useState(null);

  const handleDateChange = useCallback((date) => {
    setStartDate(date || null);
  }, []);

  const datePickerProps = useMemo(() => ({
    selected: startDate,
    onChange: handleDateChange,
    placeholderText: "选择日期"
  }), [startDate, handleDateChange]);

  return (
    <div>
      <h1>优化后的日期选择器</h1>
      <DatePicker {...datePickerProps} />
    </div>
  );
};

export default OptimizedDatePicker;

结论

日期选择器是 React 应用中不可或缺的组件之一。通过本文的介绍，希望读者能够对 react-datepicker 有一个全面的理解，并能够在实际项目中灵活应用。在开发过程中，注意处理常见的问题和易错点，确保组件的稳定性和性能。