封装一个漂亮的ant design form 时间选择组件

在ant design 的form组件中 能用于提交的组件比较少，所以我在这写了一个可以用日期选择提交的组件，调用非常简单。

代码：

import React,{Fragment} from 'react';
import moment from 'moment';
import { DatePicker,Input } from 'antd';
export interface Props {
    style?:any,//样式
    default?:string | moment.Moment,//默认值
    form?:any,//表单
    validationName?:string,//提交名称,用于菜单提交获取
    submitString?:boolean,//提交类型为字符串
    format?:string,//字符串格式，用于默认值及提交值
}
 
export interface State {
    date:moment.Moment | undefined,//选中的时间值，moment类型
    dateVal:string,//选中的时间值，string类型
}
 
class myDatePicker extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = { 
            date: typeof this.props.default === 'string'?moment(this.props.default,this.props.format):this.props.default,
            dateVal: typeof this.props.default === 'string'?this.props.default:(this.props.default!==undefined?this.props.default.format(this.props.format):''),
        };
    }
    setData=(moment:moment.Moment | null,dateVal:string)=>{
        let date:moment.Moment | undefined;
        if(moment === null){
            date = undefined;
        }else{
            date = moment;
        }
        this.setState({date,dateVal});
    }
    render() { 
        return (
            <Fragment>
                <DatePicker value = {this.state.date} onChange={(moment:moment.Moment | null,dateVal:string)=>
                    {this.setData(moment,dateVal)}} style={this.props.style} />
                {
                    this.props.form!== undefined && this.props.form.getFieldDecorator !== undefined?
                    this.props.form.getFieldDecorator(this.props.validationName!== undefined ? this.props.validationName:'datePicker', {
                        initialValue: this.props.submitString ? this.state.dateVal : this.state.date,
                      })(<Input type="hidden"/>)
                    :undefined
                }
            </Fragment> 
         );
    }
}
export default myDatePicker;

调用示例：

效果：

 

 

 

也可以在普通页面中调用：

 获取字符串类型选择的时间值

 获取moment类型选择的时间值