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

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; `

hypeserver / react-date-range

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

Subject of the issue

[BUG] Bug Reproduce Steps

[BUG] Expected behaviour

Environment