Warm tip: This article is reproduced from serverfault.com, please click

After changed Date&Time, DatePicker showing old value (React, DatePicker)

发布于 2020-12-01 13:21:51

I have DatePicker:

    import DatePicker from 'react-datepicker';

    const { state } = useLocation();
    const [dateVisit, setDateVisit] = useState(new Date());
    
    const editVist = async (e) => {
    e.preventDefault();
    
    console.log(dateVisit)
    }
    .....
    <form onSubmit={(e) => editVist(e}>
     <DatePicker
       selected={dateVisit}                                            
       onChange={date => setDateVisit(date)}
       value = {state.dataFiresStamp}                                            
       timeInputLabel="Time:"
       dateFormat="MM/dd/yyyy h:mm aa"
       showTimeInput                                            
       withPortal
      />
   </form>

Values is correct set and display.

Now when I'm changing Date&Time. Then click editVisit. Into console is showing me corrected new date, but the value into DatePicker has been not changed (still is showing old value).

Questioner
4est
Viewed
0
4est 2020-12-02 18:20:08

What I did based on https://reactdatepicker.com/:

 const [dateVisit, setDateVisit] = useState();

 const editVist = async (e) => {
    e.preventDefault();
    
    let updateDateVisit;
    
    if (dateVisit === undefined) {
            updateDateVisit = state.dataFiresStamp
        } else {
            updateDateVisit = dateVisit
        }
    } 
 ...
<DatePicker
 selected={dateVisit}
 onChange={date => setDateVisit(date)}
 placeholderText={state.dataFiresStamp}  //display data                                          
 timeInputLabel="Czas:"
 dateFormat="MM/dd/yyyy h:mm aa"
 showTimeInput
 withPortal
/>