如何操作react-day-picker显示下周

Question

所以我制作了一个组件，我只想显示“周视图”，我设法只在本周执行此操作（根据此网址：如何自定义反应日历以一次仅显示一周？） :

"use client"

import {
    endOfWeek,
    isWithinInterval,
    startOfWeek,
} from "date-fns";

import {
    DayPicker,
    Row,
    RowProps,
} from "react-day-picker";

import "react-day-picker/dist/style.css";

function CurrentWeekRow(props: RowProps) {
    const isDateInCurrentWeek = (dateToCheck: Date) => {
        const today = new Date()
        const start = startOfWeek(today);
        const end = endOfWeek(today);
        return isWithinInterval(dateToCheck, { start, end });
    };
    const isNotCurrentWeek = props.dates.every((date) => !isDateInCurrentWeek(date));
    if (isNotCurrentWeek) return <></>;
    return <Row {...props} />;
}

const DateComponent = () => {

    return (

        <div>
            <div>
                <DayPicker
                    components={{ Row: CurrentWeekRow }}
                    showOutsideDays
                    mode="single"
                />
            </div>
        </div>
    );
};

export default DateComponent;

呈现的是本周，单击下一个按钮或上一个按钮后，它不会按照图片显示任何内容。

本周：

单击下一步按钮后：

所以，这基本上就是我需要帮助来操作react-day-picker，或者可能使用其他一些库来实现此功能。我需要本周“切换”并点击保存日期到一个状态。如何解决这个问题？

Answer 1

我放弃了使用react-day-picker的解决方案，并使用date-fns库制作了自己的解决方案

const [currentDate, setCurrentDate] = useState<Date>(new Date());
const [currentWeek, setCurrentWeek] = useState<Array<Date>>([]);
const [selected, setSelected] = useState<Date>(new Date());

const getCurrentWeek = () => {
    const today = new Date();
    const start = startOfWeek(today, { weekStartsOn: 1 });
    const end = endOfWeek(today, { weekStartsOn: 1 });
    setCurrentWeek(eachDayOfInterval({ start: start, end: end }))
};

const getNextWeek = () => {
    const end = endOfWeek(currentDate, { weekStartsOn: 1 });
    const nextWeekStart = startOfWeek(new Date(end.getTime() + 1), { weekStartsOn: 1 });
    const nextWeekEnd = endOfWeek(new Date(end.getTime() + 7), { weekStartsOn: 1 });
    setCurrentWeek(eachDayOfInterval({ start: nextWeekStart, end: nextWeekEnd }))
    setCurrentDate(new Date(end.getTime() + 1));
};

const getPreviousWeek = () => {
    const start = startOfWeek(currentDate, { weekStartsOn: 1 });
    const previousWeekStart = startOfWeek(new Date(start.getTime() - 1), { weekStartsOn: 1 });
    const previousWeekEnd = endOfWeek(new Date(start.getTime() - 7), { weekStartsOn: 1 });
    setCurrentWeek(eachDayOfInterval({ start: previousWeekStart, end: previousWeekEnd }))
    setCurrentDate(new Date(start.getTime() - 1));
};

useEffect(() => {
    getCurrentWeek()
}, [])

现在呈现每周视图，并带有按钮将周切换到下一个和上一个：

     <div>
        <div className="flex flex-col justify-center items-center">
            <span style={{ marginBottom: "20px", fontSize: "20px" }}>{format(currentDate, "MMMM")}</span>
            <div className="flex flex-row gap-2 justify-center items-center">
                <ArrowCircleLeftOutlinedIcon onClick={() => getPreviousWeek()} style={{ height: "45px", width: "45px", color: "#68d6c0", fontSize: "16px", fontWeight: "bold", borderRadius: "50%" }} />
                {currentWeek.map((date) => (
                    <DayDateItem item={date} selected={selected} setSelected={setSelected} />
                ))}
                <ArrowCircleRightOutlinedIcon onClick={() => getNextWeek()} style={{ height: "45px", width: "45px", color: "#68d6c0", fontSize: "16px", fontWeight: "bold", borderRadius: "50%" }} />
            </div>
        </div>
    </div>