49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
|
|
const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
|
|
const inputRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const today = new Date();;
|
|
today.setDate(today.getDate() - 1);
|
|
const fifteenDaysAgo = new Date();
|
|
|
|
fifteenDaysAgo.setDate(today.getDate() - DateDifference);
|
|
|
|
const fp = flatpickr(inputRef.current, {
|
|
mode: "range",
|
|
dateFormat: "d-m-Y",
|
|
defaultDate: [fifteenDaysAgo, today],
|
|
static: true,
|
|
clickOpens: true,
|
|
onChange: (selectedDates, dateStr) => {
|
|
const [startDate, endDate] = dateStr.split(" to ");
|
|
onRangeChange?.({ startDate, endDate });
|
|
},
|
|
});
|
|
|
|
onRangeChange?.({
|
|
// startDate: fifteenDaysAgo.toISOString().split("T")[0],
|
|
// endDate: today.toISOString().split("T")[0],
|
|
startDate: fifteenDaysAgo.toLocaleDateString("en-CA"),
|
|
endDate: today.toLocaleDateString("en-CA"),
|
|
});
|
|
|
|
return () => {
|
|
fp.destroy();
|
|
};
|
|
}, [onRangeChange]);
|
|
|
|
return (
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm ms-1"
|
|
placeholder="From to End"
|
|
id="flatpickr-range"
|
|
ref={inputRef}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DateRangePicker;
|