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 ( + + ); +}; + +export default DateRangePickerNoDefault; diff --git a/src/pages/Gallary/ImageGallary.jsx b/src/pages/Gallary/ImageGallary.jsx index eb7bd8ad..61ae65c7 100644 --- a/src/pages/Gallary/ImageGallary.jsx +++ b/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 useImageGallery from "../../hooks/useImageGallery"; +import {formatUTCToLocalTime} from "../../utils/dateUtils"; +import DateRangePickerNoDefault from "./DateRangePickerNoDefault"; const SCROLL_THRESHOLD = 5; @@ -318,7 +318,7 @@ const ImageGallery = () => {
{type === "dateRange" ? (
-