78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
|
|
const DateRangePicker = ({
|
|
md,
|
|
sm,
|
|
onRangeChange,
|
|
DateDifference = 7,
|
|
endDateMode = "yesterday",
|
|
}) => {
|
|
const inputRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const endDate = new Date();
|
|
if (endDateMode === "yesterday") {
|
|
endDate.setDate(endDate.getDate() - 1);
|
|
}
|
|
|
|
endDate.setHours(0, 0, 0, 0);
|
|
|
|
const startDate = new Date(endDate);
|
|
startDate.setDate(endDate.getDate() - (DateDifference - 1));
|
|
startDate.setHours(0, 0, 0, 0);
|
|
|
|
const fp = flatpickr(inputRef.current, {
|
|
mode: "range",
|
|
dateFormat: "Y-m-d",
|
|
altInput: true,
|
|
altFormat: "d-m-Y",
|
|
defaultDate: [startDate, endDate],
|
|
static: false,
|
|
appendTo: document.body,
|
|
clickOpens: true,
|
|
maxDate: endDate, // ✅ Disable future dates
|
|
onChange: (selectedDates, dateStr) => {
|
|
const [startDateString, endDateString] = dateStr.split(" To ");
|
|
onRangeChange?.({ startDate: startDateString, endDate: endDateString });
|
|
},
|
|
});
|
|
|
|
onRangeChange?.({
|
|
startDate: startDate.toLocaleDateString("en-CA"),
|
|
endDate: endDate.toLocaleDateString("en-CA"),
|
|
});
|
|
|
|
return () => {
|
|
fp.destroy();
|
|
};
|
|
}, [onRangeChange, DateDifference, endDateMode]);
|
|
|
|
return (
|
|
<div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm ps-2 pe-5 "
|
|
placeholder="From to End"
|
|
id="flatpickr-range"
|
|
ref={inputRef}
|
|
/>
|
|
|
|
<i
|
|
className="bx bx-calendar calendar-icon cursor-pointer"
|
|
style={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
right: "12px",
|
|
transform: "translateY(-50%)",
|
|
color: "#6c757d",
|
|
fontSize: "1.1rem",
|
|
|
|
}}
|
|
></i>
|
|
</div>
|
|
|
|
);
|
|
};
|
|
|
|
export default DateRangePicker;
|