DatePicker onchange event not giving the updated value

user_13511402 0
Viewed 1069

I have a datepicker and it shows a default value(shows only if the api has a value), when I update it, onchange function doesn't give the selected value. it gives the initial value which is coming from the api. any idea how I can get the updated value to onchange function.

api data

const apidata = my api

setState({
...state,
formData:{
...apidata,
startDate:moment(apidata.startDate).utc()
}
})

form component

<Form
   name="update form"
   initialValues={state.formData}
   autoComplete="off"
   form={form}
>
 <Form.Item
    label="Start Date"
    name="startDate"
    rules={[{ required: true, message: "Please enter value!!!!!" }]}
>
            <DatePicker 
            value={state.formData?.startDate}
            onChange={(date: any)=>updateFields(date)}
             />
</Form.Item>
</Form>

update function

const updateFields = (data:any) => { // here I'm getting the already set api value not the changed value
setState({
...state,
formData : {
startDate:data
}
})
}
antd momentjs typescript datepicker javascript
1 Answers

The bug is not easy to find if you don't share a minimal reproducible example.

If you use the defaultValue from antd Datepicker API the onChange works as expected.

       <DatePicker
          defaultValue={moment('2015-01-01', 'YYYY-MM-DD')}
          onChange={updateFields}
        />

Here is a small stackblitz which works as expected using antd Datepicker and Form.Item.

E.g.:

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, DatePicker } from 'antd';
import moment from 'moment';

const Demo = () => {
  const [form] = Form.useForm();

  function updateFields(date, dateString) {
    console.log(date, dateString);
  }

  return (
    <Form form={form} name="control-hooks">
      <Form.Item name="DatePicker">
        <DatePicker
          defaultValue={moment('2015-01-01', 'YYYY-MM-DD')}
          onChange={updateFields}
        />
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));
user_100360390
Related