In filter DatePicker should not display dates in Image Gallery.

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;

src/pages/Gallary/ImageGallary.jsx

@@ -8,8 +8,8 @@ import Avatar from "../../components/common/Avatar";
 import DateRangePicker from "../../components/common/DateRangePicker";
 import eventBus from "../../services/eventBus";
 import Breadcrumb from "../../components/common/Breadcrumb";
-import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import {formatUTCToLocalTime} from "../../utils/dateUtils";
-import useImageGallery from "../../hooks/useImageGallery";
+import DateRangePickerNoDefault from "./DateRangePickerNoDefault";
 
 const SCROLL_THRESHOLD = 5;
 
@@ -318,7 +318,7 @@ const ImageGallery = () => {
         <div className="dropdown-content">
           {type === "dateRange" ? (
             <div className="date-range-inputs">
-              <DateRangePicker
+              <DateRangePickerNoDefault
                 onRangeChange={setDateRange}
                 endDateMode="today"
                 startDate={selectedFilters.startDate}