66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { DatePicProd } from '../../../Components/Forms/DatePickerProduct';
|
|
|
|
import moment from 'moment';
|
|
|
|
const DateComponent = ({
|
|
formattedDate,
|
|
onChangeDate,
|
|
disabledDate,
|
|
LastEntryDate,
|
|
}) => {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [CurrentDate, setCurrentDate] = useState();
|
|
const datePickerRef = useRef(null);
|
|
|
|
const handleDateClick = () => {
|
|
if (!isEditing) {
|
|
setIsEditing(true);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isEditing && datePickerRef.current) {
|
|
datePickerRef.current.click(); // Simulates opening the date picker
|
|
}
|
|
}, [isEditing]);
|
|
|
|
const handleDateChange = async (date, dateString) => {
|
|
if (dateString) {
|
|
const Date1 = moment(dateString, ['DD-MM-YYYY']).format(
|
|
'YYYY-MM-DDTHH:mm:ss'
|
|
);
|
|
setCurrentDate(Date1);
|
|
setIsEditing(false);
|
|
onChangeDate(Date1);
|
|
} else {
|
|
setCurrentDate(null);
|
|
setIsEditing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="LSDate" onClick={handleDateClick}>
|
|
{isEditing ? (
|
|
<div className="productOfShop">
|
|
<DatePicProd
|
|
ref={datePickerRef} // Attach ref to DatePicker
|
|
onChange={handleDateChange}
|
|
style={{ width: '24vw', height: '2.6rem' }}
|
|
valueData={CurrentDate}
|
|
canSelectPast={true}
|
|
cancelFuture={true}
|
|
minDate={LastEntryDate}
|
|
autoFocus
|
|
onBlur={() => setIsEditing(false)}
|
|
/>
|
|
</div>
|
|
) : (
|
|
formattedDate
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateComponent;
|