React Datepicker 使用指南

项目介绍

React Datepicker 是一个简单且可重用的 React 日期选择器组件。该项目提供了丰富的日期选择功能，包括基本日期选择、时间选择、日期范围选择等，具有高度可定制性和良好的用户体验。

快速开始

安装依赖

要使用 React Datepicker，首先需要安装必要的依赖：

npm install react-datepicker

基础用法

在 React 组件中引入并使用 Datepicker：

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

function App() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
    />
  );
}

export default App;

核心功能特性

日期范围选择

支持选择日期范围：

const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(null);

return (
  <DatePicker
    selectsRange
    startDate={startDate}
    endDate={endDate}
    onChange={(update) => {
      setStartDate(update[0]);
      setEndDate(update[1]);
    }}
  />
);

时间选择

可以结合时间选择功能：

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  showTimeSelect
  timeFormat="HH:mm"
  timeIntervals={15}
  dateFormat="yyyy-MM-dd HH:mm"
/>

自定义样式

通过自定义类名来修改组件样式：

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  className="custom-datepicker"
  calendarClassName="custom-calendar"
/>

高级配置

禁用特定日期

可以禁用周末或其他特定日期：

const isWeekday = (date) => {
  const day = date.getDay();
  return day !== 0 && day !== 6;
};

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  filterDate={isWeekday}
/>

本地化支持

支持多语言和本地化配置：

import { registerLocale } from 'react-datepicker';
import zhCN from 'date-fns/locale/zh-CN';

registerLocale('zh-CN', zhCN);

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  locale="zh-CN"
/>

自定义输入组件

可以使用自定义的输入组件：

const CustomInput = React.forwardRef(({ value, onClick }, ref) => (
  <button className="custom-input" onClick={onClick} ref={ref}>
    {value || '选择日期'}
  </button>
));

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  customInput={<CustomInput />}
/>

项目结构

React Datepicker 项目采用模块化设计，主要包含以下核心模块：

• src/calendar.tsx - 日历组件核心逻辑
• src/day.tsx - 日期单元格组件
• src/month.tsx - 月份视图组件
• src/time.tsx - 时间选择组件
• src/date_utils.ts - 日期工具函数

示例应用

项目中提供了丰富的示例代码，位于 examples/ 目录下。这些示例涵盖了各种使用场景，包括：

• 基础日期选择
• 日期范围选择
• 时间选择
• 自定义样式
• 本地化配置

最佳实践

1. 样式定制：使用提供的 CSS 类名来自定义组件外观
2. 性能优化：对于大量日期选择场景，合理使用 filterDate 属性
3. 可访问性：确保为日期选择器提供适当的标签和描述
4. 移动端适配：考虑在移动设备上的用户体验

注意事项

• 确保正确引入样式文件 react-datepicker/dist/react-datepicker.css
• 在使用 TypeScript 时，项目提供了完整的类型定义
• 对于复杂的需求，可以参考项目文档中的高级配置选项

React Datepicker 是一个功能丰富且易于使用的日期选择组件，适用于各种 React 应用场景。通过合理的配置和定制，可以满足大多数日期选择需求。