From 44b3f842f20ec3cf650be2fbf30b251c6bb1fc94 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 10 Oct 2025 16:36:39 +0530
Subject: [PATCH] Correction in Date Ranger in Attendance Logs.

---
 src/components/common/DateRangePicker.jsx | 31 +++++++++++------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index 8e815fec..fd0cc6e3 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -33,7 +33,7 @@ const DateRangePicker = ({
       startDate.setHours(0, 0, 0, 0);
     }
 
-    const fp = flatpickr(inputRef.current, { 
+    const fp = flatpickr(inputRef.current, {
       mode: "range",
       dateFormat: "Y-m-d",
       altInput: true,
@@ -63,19 +63,18 @@ const DateRangePicker = ({
   };
 
   return (
-    <div className={`col-${sm} col-sm-${md} px-1`}>
+    <div className={`position-relative w-auto justify-content-center`}>
       <input
         type="text"
-        className="form-control form-control-sm ps-2 pe-5 me-4"
+        className="form-control form-control-sm w-100 pe-8 "
         placeholder="From to End"
         id="flatpickr-range"
         ref={inputRef}
       />
 
       <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y"
+        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
         onClick={handleIconClick}
-        style={{ right: "22px", bottom: "-8px" }}
       />
     </div>
   );
@@ -130,7 +129,7 @@ export const DateRangePicker1 = ({
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
-      maxDate ,
+      maxDate,
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
@@ -160,19 +159,19 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-  if (resetSignal !== undefined) {
-    if (defaultRange) {
-      applyDefaultDates();
-    } else {
-      setValue(startField, "", { shouldValidate: true });
-      setValue(endField, "", { shouldValidate: true });
+    if (resetSignal !== undefined) {
+      if (defaultRange) {
+        applyDefaultDates();
+      } else {
+        setValue(startField, "", { shouldValidate: true });
+        setValue(endField, "", { shouldValidate: true });
 
-      if (inputRef.current?._flatpickr) {
-        inputRef.current._flatpickr.clear();
+        if (inputRef.current?._flatpickr) {
+          inputRef.current._flatpickr.clear();
+        }
       }
     }
-  }
-}, [resetSignal, defaultRange, setValue, startField, endField]);
+  }, [resetSignal, defaultRange, setValue, startField, endField]);
 
 
   const start = getValues(startField);