how to show a calendar and allow only date selection but show a range selection according to the week selection logic

[anushka-2022]

Subject of the issue

Describe your issue here.

[BUG] Bug Reproduce Steps

Tell us how to reproduce this issue.

[BUG] Expected behaviour

Environment

Package Version:
React version:
Node version:
Browser:

[anushka-2022]

The second calendar is Week Calendar and I want to select only 1 date and show the range as startOfWeek and endOfWeek but after selection of the date it still shows selection of 2nd date. how do I remove 2nd date selection and still show date range selection according the logic?

`import React, { useState } from "react";
import "react-date-range/dist/styles.css"; // main css file
import "react-date-range/dist/theme/default.css"; // theme css file
import { DateRangePicker } from "react-date-range";
import {
startOfWeek,
endOfWeek,
endOfDay,
subYears,
startOfDay
} from "date-fns";

const WeekCalendar = ({ onChange }) => {
const [state, setState] = useState([
{
startDate: startOfWeek(new Date(), { weekStartsOn: 1 }),
endDate:
endOfWeek(new Date(), { weekStartsOn: 1 }) < endOfDay(new Date())
? endOfWeek(selectedDate, { weekStartsOn: 1 })
: endOfDay(new Date()),
key: "selection"
}
]);

// const handleOnChange = (ranges) => {
// const { selection } = ranges;
// console.log(selection);

// // If only a single date is selected, set the range to startOfWeek and endOfWeek for that date
// if (selection.startDate && !selection.endDate) {
// const selectedDate = selection.startDate;
// const newStartDate = startOfWeek(selectedDate, { weekStartsOn: 1 });
// const newEndDate =
// endOfWeek(selectedDate, { weekStartsOn: 1 }) < endOfDay(new Date())
// ? endOfWeek(selectedDate, { weekStartsOn: 1 })
// : endOfDay(new Date());

// onChange({ startDate: newStartDate, endDate: newEndDate });
// setState([
// { startDate: newStartDate, endDate: newEndDate, key: "selection" }
// ]);
// }
// };

const handleOnChange = (ranges) => {
const { selection } = ranges;

// If only a single date is selected, set the range to startOfWeek and endOfWeek for that date
if (
  selection.startDate &&
  selection.endDate &&
  selection.startDate.getTime() === selection.endDate.getTime()
) {
  const selectedDate = selection.startDate;
  const newStartDate = startOfWeek(selectedDate, { weekStartsOn: 1 });
  const newEndDate =
    endOfWeek(selectedDate, { weekStartsOn: 1 }) < endOfDay(new Date())
      ? endOfWeek(selectedDate, { weekStartsOn: 1 })
      : endOfDay(new Date());

  onChange({ startDate: newStartDate, endDate: newEndDate });
  setState([
    { startDate: newStartDate, endDate: newEndDate, key: "selection" }
  ]);
}

};

return (
<DateRangePicker
className={"WeekCalendar"}
onChange={handleOnChange}
moveRangeOnFirstSelection={false}
months={2}
rangeColors={["#55bc55"]}
maxDate={startOfDay(new Date())}
minDate={subYears(new Date(), 10)}
ranges={state}
direction="horizontal"
weekStartsOn={1}
staticRanges={[]}
inputRanges={[]}
showSelectionPreview={true} // Show the selected date range as a highlighted area
editableDateInputs={false} // Disable manual date input
/>
);
};

export default WeekCalendar;
`

Playground:
https://codesandbox.io/p/sandbox/react-dwl52i?file=%2Fsrc%2Fcomponents%2FCalendar.jsx%3A29%2C16&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltpm86o40006356kxbbe3v3l%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltpm86o40002356kpeks80zo%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltpm86o40003356kncql1345%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltpm86o40005356kd41zutg0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B43.84964338123919%252C56.15035661876081%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltpm86o40002356kpeks80zo%2522%253A%257B%2522id%2522%253A%2522cltpm86o40002356kpeks80zo%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltpm86o40005356kd41zutg0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltpm86o40004356knkesqf1o%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltpm86o40005356kd41zutg0%2522%252C%2522activeTabId%2522%253A%2522cltpm86o40004356knkesqf1o%2522%257D%252C%2522cltpm86o40003356kncql1345%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltpm86o40003356kncql1345%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D