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?

[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

Originally posted by @anushka-2022 in https://github.com/hypeserver/react-date-range/issues/643#issuecomment-1997089338