react-multi-date-picker icon indicating copy to clipboard operation
react-multi-date-picker copied to clipboard

Problem of not updating the state after manually changing the time

Open MB-KING opened this issue 2 years ago • 0 comments

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 />}
/>

MB-KING avatar May 07 '22 10:05 MB-KING

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}  
/>  

mohammad-mo avatar Aug 18 '22 08:08 mohammad-mo