File size: 1,514 Bytes
cf86710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import { useState } from "react";
import { endOfWeek, isSameWeek, startOfWeek } from "date-fns";
import { DateRange, DayPicker } from "./react-day-picker-v8";
/** Select the whole week when the day is clicked. */
export function CustomWeek() {
const [selectedWeek, setSelectedWeek] = useState<DateRange | undefined>();
return (
<DayPicker
showWeekNumber
modifiers={{
// @ts-expect-error Strict mode not working
selected: selectedWeek
}}
onDayClick={(day, modifiers) => {
if (modifiers.selected) {
setSelectedWeek(undefined); // clear the selection if the week is already selected
return;
}
setSelectedWeek({
from: startOfWeek(day),
to: endOfWeek(day)
});
}}
onWeekNumberClick={(weekNumber, dates) => {
if (selectedWeek?.from && isSameWeek(dates[0], selectedWeek.from)) {
setSelectedWeek(undefined); // clear the selection if the week is already selected
return;
}
setSelectedWeek({
from: startOfWeek(dates[0]),
to: endOfWeek(dates[dates.length - 1])
});
}}
footer={
selectedWeek && (
<p>
{/* @ts-expect-error Strict mode not working */}
Week from {selectedWeek.from.toLocaleDateString()} to
{/* @ts-expect-error Strict mode not working */}
{selectedWeek.to.toLocaleDateString()}
</p>
)
}
/>
);
}
|