42 lines
939 B
JavaScript
42 lines
939 B
JavaScript
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) => {
|
|
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;
|