made sepearte dataPickers

This commit is contained in:
Pramod Mahajan 2025-04-13 17:26:36 +05:30
parent c459ef678e
commit 4c2fbf7bc6
2 changed files with 77 additions and 0 deletions

View 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;

View 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;