react-antdesign中form表单日期时间选择-时间段选择

在antdesign的form中使用带开始和结束的时间选择控件注意点：

直接上代码：

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

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

重点：

onFinish
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是解析后的时间格式
};

说明：

form表单的时间选择结合带开始和结束并能选择日期和时间的情况下要做到同步到提交表单数据内也不难，要注意的是在form绑定的提交按钮onfinish函数内打印出来的是monment对象，所以需要格式化解析以下才可以（真实版本在这里格式化后提交到后端）

参考整体代码：

import React from 'react'
import { Form, Input, InputNumber, Button,Select, Upload, Radio,Rate,DatePicker, Space  } from 'antd';

import { UploadOutlined, InboxOutlined } from '@ant-design/icons';

const { Option } = Select;
const { RangePicker } = DatePicker;

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 12 },
};
const rangeConfig = e => {
    console.log(e)
}
const tailLayout = {
    // wrapperCol: { offset: 0, span: 10 },
};
const labelCol={
    span: 3, offset: 12
}
const normFile = e => {//这个很重要，如果没有将上传失败并报错
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
};
const validateMessages = {
    required: '${label} is required!',
    types: {
      email: '${label} is not validate email!',
      number: '${label} is not a validate number!',
    },
    number: {
      range: '${label} 必须在 ${min} 和 ${max}之间',
    },
};
const onFinish = (fieldsValue) => {//表单提交成功事件
    // console.log(fieldsValue);
    //格式化时间-析构moment对象
    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是解析后的时间格式
};
const onChangeTimer = (t,s)=>{//时间发生变化时触发-参数：time: moment, timeString: string
    console.log(t,s)
}
class FormDay extends React.Component{
    constructor(props){
        super(props)
        this.state={}
}
render(){
        return(
            <div>
               <Form {...labelCol} {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                    <Form.Item name={['user', 'name']} label="节目名" rules={[{ required: false }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
                        <Input />
                    </Form.Item>
                    {/* 选择节目 */}
                    <Form.Item
                        name="jiemu"
                        label="节目"
                        hasFeedback
                        rules={[{ required: false, message: '请选择节目!' }]}
                    >
                        <Select placeholder="请选择节目">
                        <Option value="china">China</Option>
                        <Option value="usa">U.S.A</Option>
                        </Select>
                    </Form.Item>
                    {/* 添加素材 */}
                    <Form.Item
                        name="upload"
                        label="添加素材"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                        extra=""
                    >
                        <Upload name="logo" action="/upload.do" listType="picture">
                        <Button>
                            <UploadOutlined /> 添加素材 
                        </Button>
                        </Upload>
                    </Form.Item>
                    {/* 重复-单选 */}
                    <Form.Item name="repeat" label="重复">
                        <Radio.Group>
                        <Radio value="周一">每天</Radio>
                        <Radio value="周二">每周</Radio>
                        <Radio value="周三">每月</Radio>
                        <Radio value="周三">特别日</Radio>
                        <Radio value="周三">自定义</Radio>
                        </Radio.Group>
                    </Form.Item>
                    {/* 指定时间 */}
                    {/* <Form.Item name="rate" label="Rate">
                        <Rate />
                    </Form.Item> */}
                    <Form.Item
                            label="选择时间"
                            name="timer1"
                            >
                              <RangePicker onChange={onChangeTimer} showTime/>
                    </Form.Item>
                    {/* button */}
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default FormDay