React-Day-Picker自定义日期选择功能详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00550/article/details/148467799

React-Day-Picker自定义日期选择功能详解

react-day-picker DayPicker is a customizable date picker component for React, with native TypeScript support. 项目地址: https://gitcode.com/gh_mirrors/re/react-day-picker

前言

React-Day-Picker是一个功能强大的React日期选择组件库，它提供了多种内置的日期选择模式。但实际开发中，我们经常需要实现一些特殊的选择逻辑。本文将深入讲解如何利用React-Day-Picker的onDayClick和modifiers属性来实现自定义日期选择功能。

核心概念

1. onDayClick事件处理器

onDayClick是当用户点击日期单元格时触发的回调函数，它接收两个参数：

被点击的日期对象
该日期的修饰符对象

2. modifiers修饰符系统

modifiers是一个对象，用于定义日期的各种状态（如选中、禁用等）。通过合理设置修饰符，我们可以控制日期的显示样式和交互行为。

自定义选择实现方案

1. 自定义周选择功能

实现思路：

使用startOfWeek和endOfWeek函数确定周范围
通过isDateInRange判断日期是否在选中范围内
利用modifiers设置不同日期状态的样式

function CustomWeek() {
  const [selectedWeek, setSelectedWeek] = useState<DateRange | undefined>();

  return (
    <DayPicker
      modifiers={{
        selected: selectedWeek,
        range_start: selectedWeek?.from,
        range_end: selectedWeek?.to,
        range_middle: (date) => 
          selectedWeek && isDateInRange(date, selectedWeek, { excludeEnds: true })
      }}
      onDayClick={(day, modifiers) => {
        if (modifiers.selected) {
          setSelectedWeek(undefined);
          return;
        }
        setSelectedWeek({
          from: startOfWeek(day),
          to: endOfWeek(day)
        });
      }}
    />
  );
}

2. 自定义单选功能

实现要点：

使用单个日期状态变量存储选中日期
点击已选中日期时取消选择
通过modifiers.selected设置选中状态

function CustomSingle() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>();

  return (
    <DayPicker
      modifiers={{ selected: selectedDate }}
      onDayClick={(day, modifiers) => {
        setSelectedDate(modifiers.selected ? undefined : day);
      }}
    />
  );
}

3. 自定义多选功能

实现技巧：

使用数组存储多个选中日期
点击已选日期时从数组中移除
点击未选日期时添加到数组
使用isSameDay进行日期比较

function CustomMultiple() {
  const [selectedDates, setSelectedDates] = useState<Date[]>([]);

  const handleDayClick = (day, modifiers) => {
    const newDates = [...selectedDates];
    if (modifiers.selected) {
      const index = selectedDates.findIndex(d => isSameDay(day, d));
      newDates.splice(index, 1);
    } else {
      newDates.push(day);
    }
    setSelectedDates(newDates);
  };

  return (
    <DayPicker
      modifiers={{ selected: selectedDates }}
      onDayClick={handleDayClick}
    />
  );
}

高级技巧

性能优化：对于大量日期的选择，考虑使用Set或Map来存储选中状态，提高查找效率。
自定义样式：可以通过CSS为不同的修饰符状态定义样式，如：
```
.rdp-day_selected {
  background-color: #2563eb;
  color: white;
}
```
组合选择模式：可以结合多种选择逻辑，例如同时支持单选和多选模式切换。
日期验证：在选择前可以添加验证逻辑，确保只选择符合条件的日期。