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>