antd表单中使用DatePicker,初始赋值、表单内容改变、表单提交报错
原因:DatePicker接受数据类型必须为时间类型而不能是字符串,同理当表单数据改变或提交时需要对数据进行处理
<Form
form={form}
//初始赋值
initialValues={{
cleanDate: dayjs(nowTime, dateFormat)
}}
name="basicForm"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
onValuesChange={onValuesChange}
>
<Form.Item
//根据属性名字接受初始值,传到datepicker
name="cleanDate"
label="清场日期"
rules={[
{ required: true, message: '关键词不能为空!' }
]}
>
<DatePicker
allowClear={false}
showTime
onChange={getCleanDate}
/>
</Form.Item>
</Form>
当表单数据改变或者表单提交时
//可以修改表单中的数据
const [form] = Form.useForm()
const onFinish = (values) => {
console.log(values)
//接受到值的时候,将将数据进行处理
const valuess = {
...values,
cleanDate: values['cleanDate'].format('YYYY.MM.DD HH:mm'),
}
}
//同理
const onValuesChange = (changedValues, allValues) => {
const valuess = {
...allValues,
cleanDate: allValues['cleanDate'].format('YYYY.MM.DD HH:mm'),
}
//将表单数据改变
form.setFieldValue('cleanTime', allValues['cleanDate'].format('YYYY.MM.DD'))
}