如何操作react-day-picker实现周视图切换及日期选择

问题根源 #

你的自定义CurrentWeekRow组件始终以今日所在周为判断依据，导致切换到其他周时，所有行都被过滤隐藏，因此无内容显示。

解决方案步骤 #

1. 跟踪当前显示周的起始日期：使用React状态管理当前要展示的周的起始时间，替代固定的今日周。
2. 限制DayPicker的显示范围：通过fromDate和toDate props指定当前周的起止日期，让DayPicker仅渲染该周的日期。
3. 实现周切换逻辑：添加按钮控制当前周的切换，通过增减7天更新起始日期状态。
4. 存储选中日期：新增状态变量记录用户选中的日期，并绑定到DayPicker的selected和onSelect属性。

完整修正代码 #

"use client"

import { useState } from "react";
import {
    endOfWeek,
    startOfWeek,
    addDays,
    format
} from "date-fns";

import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";

const DateComponent = () => {
    // 当前显示周的起始日期
    const [currentWeekStart, setCurrentWeekStart] = useState(startOfWeek(new Date()));
    // 当前显示周的结束日期
    const currentWeekEnd = endOfWeek(currentWeekStart);
    // 选中的日期状态
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);

    // 切换到上一周
    const goToPreviousWeek = () => {
        setCurrentWeekStart(prev => addDays(prev, -7));
    };

    // 切换到下一周
    const goToNextWeek = () => {
        setCurrentWeekStart(prev => addDays(prev, 7));
    };

    return (
        <div>
            {/* 自定义周切换按钮 */}
            <div style={{ display: "flex", gap: "1rem", marginBottom: "1rem" }}>
                <button onClick={goToPreviousWeek}>上一周</button>
                <button onClick={goToNextWeek}>下一周</button>
            </div>
            
            <DayPicker
                // 限制显示当前周的日期范围
                fromDate={currentWeekStart}
                toDate={currentWeekEnd}
                // 隐藏默认的月份导航按钮
                showNavigation={false}
                showOutsideDays
                mode="single"
                // 绑定选中日期状态
                selected={selectedDate}
                onSelect={setSelectedDate}
            />

            {/* 展示选中的日期 */}
            {selectedDate && (
                <p style={{ marginTop: "1rem" }}>
                    选中日期: {format(selectedDate, "yyyy-MM-dd")}
                </p>
            )}
        </div>
    );
};

export default DateComponent;

关键说明 #

• 移除了原有的CurrentWeekRow组件，因为通过fromDate和toDate已经可以精准控制显示的周范围，无需再过滤行。
• 使用addDays方法增减周起始日期，确保周切换的准确性。
• 通过selected和onSelect绑定选中日期状态，实现日期选择的状态存储。

内容的提问来源于stack exchange，提问作者Dustaboy3