react-multi-date-picker
react-multi-date-picker copied to clipboard
Problem of not updating the state after manually changing the time
Hello After configuring the plugin, I save the output to a state After that, I convert it and send it to the backend in a special format
But it is only updated when a date is clicked If the date is changed manually or there is no last click on a date, the state will not be updated
I need guidance to resolve this issue Thank you for your support
const [datePickerTime, setDatePickerTime] = useState("");
useEffect(() => {
if (datePickerTime !== "") {
let pickTime = datePickerTime?.toDate?.().toString();
const convertedPickedTime = dateFormat(pickTime, "yyyy-mm-dd HH:MM:ss");
setRequestData({
...requestData,
ScheduleDateTime: convertedPickedTime,
});
}
}, [datePickerTime]);
<DatePicker
className="yellow"
inputClass="custom-input"
calendar={persian}
value={datePickerTime}
onChange={setDatePickerTime}
format="YYYY-MM-DD HH:mm:ss"
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-right"
plugins={[<TimePicker position="left" />]}
animations={[transition()]}
render={<InputIcon />}
/>
Hello Mohammad I had the same problem in our project, you have to use onPropsChange in order to change the time when the state changes. here's a useful link. An Example:
const [datePickerTime, setDatePickerTime] = useState("");
const [props, setProps] = useState({
value: datePickerTime,
onChange: (date) => setDatePickerTime(date),
plugins: [<TimePicker />],
});
.
.
.
<DatePicker
{...props}
onPropsChange={setProps}
/>