antd表单中使用DatePicker,初始赋值、表单内容改变、表单提交报错

发布时间 2023-11-09 09:43:44作者: 分页需带参

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

  }