react-ant design:form表单组件 带开始和结束的时间选择

form表单的时间选择结合带开始和结束并能选择日期和时间的情况下要做到同步到提交表单数据内也不难

要注意的是在form绑定的提交按钮onfinish函数内打印出来的是monment对象，所以需要格式化解析以下才可以（真实版本在这里格式化后提交到后端）

一般form.item内的name=‘’ label=''

指定的name=‘timerKey’:name属性所指定的属性在form绑定的onfinished提交按钮事件中都会打印出来获取到（都会导入提交表格对象内）

所以只要在form.item内指定上name，和label（同其它添加form-item一样）内部添加时间组件如<RangePicker onChange={onChangeTimer} showTime/>

然后添加相应的事件如onchange：onchange是只要改变时间就会触发，中间不需要也可以直接在form表单提交的时候获取：这时候需要过滤时间对象不然它返回的是monent时间对象而非你想要的时间字符串

需要注意的是如果格式化format时间一定要判断时间是否为空（选择时间没）不然直接点击按钮会报错找不到时间对象

Cannot read property '0' of undefined

也可以设置form的必填项规避

<Form.Item
label="选择时间"
name="timer1"
rules={[{ required: true }]}
>
<RangePicker onChange={onChangeTimer} showTime/>
</Form.Item>

const onChangeTimer = (t,s)=>{//时间发生变化时触发-参数：time: moment, timeString: string
    console.log(t,s)
}

 <Form {...labelCol} {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
   <Form.Item
                            label="选择时间"
                            name="timer1"
                            >
                              <RangePicker onChange={onChangeTimer} showTime/>
                    </Form.Item>
</Form>

const onFinish = (fieldsValue) => {
    // console.log(fieldsValue);
    const rangeValue = fieldsValue['timer1'];
    const values = {
        ...fieldsValue,
        'timer1': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
      };
    console.log('Received values of form: ',fieldsValue, values);//第一个参数timer1是moment对象 第二个values值内timer1是解析后的时间格式
};

 扩展：

不带日期的区间时间选择：

import {TimePicker} from 'antd'
const { RangePicker } = TimePicker;
        const onFinish = fieldsValue => {//提交按钮
            //格式化时间-析构moment对象
            const rangeValue = fieldsValue['zhiTimer'];
            console.log(rangeValue)
            // if(!rangeValue) return 
            const values = {
                ...fieldsValue,
                'zhiTimer': [rangeValue[0].format('h:mm:ss'), rangeValue[1].format('h:mm:ss')],
            };
            console.log('Success:', values);//这里直接打印values即可获取格式化并合并到原对象内后的对象
          };

render(){
return(
 {/* 指定时间 */}
                    <Form.Item name="zhiTimer" label="指定时间">
                         <RangePicker />
                    </Form.Item>
)}
注意：
在使用时间组件和form一起时，尤其是区间选择时间，中间不能嵌套其它组件比如space组件
不然会在完成提交按钮后获取不到所选时间值

<Form.Item label="日期" name="chosedate">
{/* <Space direction="vertical" size={12}> */}
<RangePicker></RangePicker>
{/* </Space> */}
</Form.Item>