Currently, I have created date pick buttons such as today, yesterday, and thisWeek using react-datepicker. The function works well, but there is an issue where the highlight for the current date is maintained. How can I solve this? As shown in the photo below, clicking lastWeek moves to that date, but the highlight of today's date is maintained.
// dateCalculation.ts
import {
startOfWeek,
endOfWeek,
startOfMonth,
endOfMonth,
startOfYear,
endOfYear,
subYears,
} from "date-fns";
export const calculateDatesFromOption = (
option: { label: string; value: string },
today = new Date()
) => {
let calculatedStartDate = new Date();
let calculatedEndDate = new Date();
switch (option.value) {
case "today":
calculatedStartDate = today;
calculatedEndDate = today;
break;
case "yesterday":
calculatedStartDate = new Date(today);
calculatedEndDate = new Date(today);
calculatedStartDate.setDate(today.getDate() - 1);
calculatedEndDate.setDate(today.getDate() - 1);
break;
case "thisWeek":
calculatedStartDate = startOfWeek(today, { weekStartsOn: 0 });
calculatedEndDate = endOfWeek(today, { weekStartsOn: 0 });
break;
case "lastWeek":
calculatedStartDate = startOfWeek(today, { weekStartsOn: 0 });
calculatedEndDate = endOfWeek(today, { weekStartsOn: 0 });
calculatedStartDate.setDate(calculatedStartDate.getDate() - 7);
calculatedEndDate.setDate(calculatedEndDate.getDate() - 7);
break;
case "thisMonth":
calculatedStartDate = startOfMonth(today);
calculatedEndDate = endOfMonth(today);
break;
case "lastMonth":
calculatedStartDate = startOfMonth(today);
calculatedEndDate = endOfMonth(today);
calculatedStartDate.setMonth(calculatedStartDate.getMonth() - 1);
calculatedEndDate.setMonth(calculatedEndDate.getMonth() - 1);
break;
case "lastYear":
calculatedStartDate = startOfYear(today);
calculatedEndDate = endOfYear(today);
calculatedStartDate = subYears(calculatedStartDate, 1);
calculatedEndDate = subYears(calculatedEndDate, 1);
break;
case "thisYear":
calculatedStartDate = startOfYear(today);
calculatedEndDate = endOfYear(today);
break;
default:
calculatedStartDate = today;
calculatedEndDate = today;
}
return { start: calculatedStartDate, end: calculatedEndDate };
};
"use client";
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { calculateDatesFromOption } from "./dateCalculation";
const Datepic = () => {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const options = [
{ label: "today", value: "today" },
{ label: "yesterday", value: "yesterday" },
{ label: "thisWeek", value: "thisWeek" },
{ label: "lastWeek", value: "lastWeek" },
{ label: "thisMonth", value: "thisMonth" },
{ label: "lastMonth", value: "lastMonth" },
{ label: "lastYear", value: "lastYear" },
{ label: "thisYear", value: "thisYear" },
];
const handleOption = (option) => {
const { start, end } = calculateDatesFromOption(option);
setStartDate(start);
setEndDate(end);
};
const handleStartDateChange = (date) => {
setStartDate(date);
};
const handleEndDateChange = (date) => {
setEndDate(date);
};
return (
<div>
<DatePicker
dateFormat="yyyy.MM.dd"
inline
selected={startDate}
onChange={handleStartDateChange}
startDate={startDate}
></DatePicker>
<div className="flex gap-3 pb-[15px] pl-[25px] pt-[9px]">
{options.map((option, index) => (
<span
key={index}
className="cursor-pointer"
onClick={() => handleOption(option)}
>
{option.label}
</span>
))}
</div>
<DatePicker
dateFormat="yyyy.MM.dd"
inline
selected={endDate}
onChange={handleEndDateChange}
endDate={endDate}
></DatePicker>
</div>
);
};
export default Datepic;