ant design 中关可编辑表格使用日期组件

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 {
    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 (
            
                
                    {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,
                      })()
                    :undefined
                }
             
         );
    }
}
export default myDatePicker;

调用方式: