From 788a096f00b242bca505ce44301f2115bb6c499f Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 8 Jul 2025 13:09:10 +0530
Subject: [PATCH] In filter DatePicker should not display dates in Image
 Gallery.

---
 .../Gallary/DateRangePickerNoDefault.jsx      | 55 +++++++++++++++++++
 src/pages/Gallary/ImageGallary.jsx            |  3 +-
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Gallary/DateRangePickerNoDefault.jsx

diff --git a/src/pages/Gallary/DateRangePickerNoDefault.jsx b/src/pages/Gallary/DateRangePickerNoDefault.jsx
new file mode 100644
index 00000000..6c793b86
--- /dev/null
+++ b/src/pages/Gallary/DateRangePickerNoDefault.jsx
@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from "react";
+
+const DateRangePickerNoDefault = ({
+  onRangeChange,
+  startDate,
+  endDate,
+}) => {
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    const fp = flatpickr(inputRef.current, {
+      mode: "range",
+      dateFormat: "Y-m-d",
+      altInput: true,
+      altFormat: "d-m-Y",
+      static: true,
+      clickOpens: true,
+      onChange: (selectedDates, dateStr) => {
+        if (selectedDates.length === 2) {
+          const [startDateString, endDateString] = dateStr.split(" to ");
+          onRangeChange?.({ startDate: startDateString, endDate: endDateString });
+        } else if (selectedDates.length === 0) {
+          onRangeChange?.({ startDate: "", endDate: "" });
+        }
+      },
+      onReady: (selectedDates, dateStr, instance) => {
+        if (startDate && endDate) {
+          instance.setDate([startDate, endDate], true);
+        }
+      },
+    });
+
+    if (startDate && endDate) {
+      fp.setDate([startDate, endDate], false);
+    } else if (!startDate && !endDate) {
+      fp.clear();
+    }
+
+    return () => {
+      fp.destroy();
+    };
+  }, [onRangeChange, startDate, endDate]);
+
+  return (
+    <input
+      type="text"
+      className="form-control form-control-sm ms-1"
+      placeholder="DD-MM-YYYY to DD-MM-YYYY"
+      id="flatpickr-range"
+      ref={inputRef}
+    />
+  );
+};
+
+export default DateRangePickerNoDefault;
diff --git a/src/pages/Gallary/ImageGallary.jsx b/src/pages/Gallary/ImageGallary.jsx
index 016d2bc6..eeb6e872 100644
--- a/src/pages/Gallary/ImageGallary.jsx
+++ b/src/pages/Gallary/ImageGallary.jsx
@@ -10,6 +10,7 @@ import DateRangePicker from "../../components/common/DateRangePicker";
 import eventBus from "../../services/eventBus";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import {formatUTCToLocalTime} from "../../utils/dateUtils";
+import DateRangePickerNoDefault from "./DateRangePickerNoDefault";
 
 const PAGE_SIZE = 10;
 const SCROLL_THRESHOLD = 5;
@@ -404,7 +405,7 @@ const ImageGallery = () => {
         <div className="dropdown-content">
           {type === "dateRange" ? (
             <div className="date-range-inputs">
-              <DateRangePicker
+              <DateRangePickerNoDefault
                 onRangeChange={setDateRange}
                 defaultStartDate={selectedFilters.startDate || yesterday}
                 defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}