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
}
})
}
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'));