How to prevent today's date from highlighting when clicking the date pick button in react-datepicker?

19 views Asked by At

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;

enter image description here

0

There are 0 answers