calendar range days

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -37,11 +37,16 @@ export const ProfileCalendar = () => {
   const [totalHours, setTotalHours] = useState(0);
   const [loader, setLoader] = useState(true);
   const [startRangeDays, setStartRangeDays] = useState(false);
+  const [startDate, setStartDate] = useState(null);
 
   function setValueHandler(value) {
     setValue(value);
   }
 
+  function setStartDateRange (date) {
+    setStartDate(date)
+  }
+
   function toggleStartRangeDays() {
     setStartRangeDays(!startRangeDays);
   }
@@ -122,6 +127,8 @@ export const ProfileCalendar = () => {
                 totalHours={totalHours}
                 startRangeDays={startRangeDays}
                 toggleRangeDays={toggleStartRangeDays}
+                startDate={startDate}
+                setStartDateRange={setStartDateRange}
               />
             </div>
           </div>

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -38,6 +38,8 @@ export const ProfileCalendarComponent = React.memo(
     totalHours,
     startRangeDays,
     toggleRangeDays,
+    startDate,
+    setStartDateRange
   }) => {
     const dispatch = useDispatch();
 
@@ -45,7 +47,6 @@ export const ProfileCalendarComponent = React.memo(
     const [calendar, setCalendar] = useState([]);
     const [month, setMonth] = useState("");
     const [shortReport, setShortReport] = useState(false);
-    const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
     const [totalRangeHours, setTotalRangeHours] = useState(0);
     const [selectedRangeDays, setSelectedRangeDays] = useState({});
@@ -58,6 +59,9 @@ export const ProfileCalendarComponent = React.memo(
           [array[0]]: false,
         }));
       });
+      if (endDate) {
+        resetRangeDays()
+      }
     }, [value]);
 
     useEffect(() => {
@@ -113,9 +117,11 @@ export const ProfileCalendarComponent = React.memo(
     }
 
     function reportsByDate(endDay) {
-      const requestDates = `fromDate=${getCorrectYYMMDD(
+      const requestDates = startDate < endDay ? `fromDate=${getCorrectYYMMDD(
         startDate._d
-      )}&toDate=${getCorrectYYMMDD(endDay._d)}`;
+      )}&toDate=${getCorrectYYMMDD(endDay._d)}` : `fromDate=${getCorrectYYMMDD(
+          endDay._d
+      )}&toDate=${getCorrectYYMMDD(startDate._d)}`;
       apiRequest(
         `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
           "cardId"
@@ -135,7 +141,7 @@ export const ProfileCalendarComponent = React.memo(
 
     function rangeDays(day) {
       if (!startDate) {
-        setStartDate(day);
+        setStartDateRange(day);
       } else {
         setEndDate(day);
         reportsByDate(day);
@@ -145,21 +151,35 @@ export const ProfileCalendarComponent = React.memo(
     function onMouseRangeDays(day) {
       let selectRange = {};
       for (let curDay in selectedRangeDays) {
-        if (
+        if (day > startDate) {
-          day > startDate &&
+          if (
-          new Date(curDay) > startDate &&
+              day > startDate &&
-          new Date(curDay) < day
+              new Date(curDay) > startDate &&
-        ) {
+              new Date(curDay) < day
-          selectRange[curDay] = true;
+          ) {
+            selectRange[curDay] = true;
+          }
+          else {
+            selectRange[curDay] = false;
+          }
         } else {
-          selectRange[curDay] = false;
+          if (
+              day < startDate &&
+              new Date(curDay) < startDate &&
+              new Date(curDay) > day
+          ) {
+            selectRange[curDay] = true;
+          }
+          else {
+            selectRange[curDay] = false;
+          }
         }
       }
       setSelectedRangeDays(selectRange);
     }
 
     function resetRangeDays() {
-      setStartDate(null);
+      setStartDateRange(null);
       setEndDate(null);
       setTotalRangeHours(0);
       calendarHelper(value).map((array) => {
@@ -246,7 +266,7 @@ export const ProfileCalendarComponent = React.memo(
                   className={
                     startRangeDays
                       ? `selectDays ${
-                          startDate === day || endDate === day
+                            String(startDate?._d) === String(day._d) || endDate === day
                             ? "selectedDay"
                             : ""
                         } ${endDate ? "disable" : ""} ${
@@ -279,7 +299,7 @@ export const ProfileCalendarComponent = React.memo(
             }}
           >
             {endDate
-              ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
+              ? startDate < endDate ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
               : "Выбрать диапазон"}
           </span>
           <span>