made sepearte dataPickers
This commit is contained in:
parent
c459ef678e
commit
4c2fbf7bc6
42
src/components/common/DatePicker.jsx
Normal file
42
src/components/common/DatePicker.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
const DatePicker = ({ onDateChange }) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
dateFormat: "Y-m-d",
|
||||
defaultDate: new Date(),
|
||||
onChange: (selectedDates, dateStr) => {
|
||||
console.log("Selected date:", dateStr);
|
||||
if (onDateChange) {
|
||||
onDateChange(dateStr); // Pass selected date to parent
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
// Cleanup flatpickr instance
|
||||
fp.destroy();
|
||||
};
|
||||
}, [onDateChange]);
|
||||
|
||||
return (
|
||||
<div className="container mt-3">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="flatpickr-single" className="form-label">
|
||||
Select Date
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="flatpickr-single"
|
||||
className="form-control"
|
||||
placeholder="YYYY-MM-DD"
|
||||
ref={inputRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatePicker;
|
35
src/components/common/DateRangePicker.jsx
Normal file
35
src/components/common/DateRangePicker.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
const DateRangePicker = ({ onRangeChange }) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
mode: "range",
|
||||
dateFormat: "Y-m-d",
|
||||
static: true,
|
||||
clickOpens: true,
|
||||
onChange: (selectedDates, dateStr) => {
|
||||
const [startDate, endDate] = dateStr.split(" to ");
|
||||
onRangeChange?.({ startDate, endDate });
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
// Cleanup Flatpickr instance
|
||||
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;
|
Loading…
x
Reference in New Issue
Block a user