Редактируемая таблица React Antt для добавления выбора даты не работает

Question

Я использую мой проект сценария типа реакции для редактируемой таблицы дизайна муравьев . когда я пытаюсь добавить средство выбора даты, он не работает правильно, кто-нибудь знает, как это сделать правильно

Спасибо

Код здесь.

EditableTable.tsx

// tslint:disable:no-any
import {DatePicker, Popconfirm, Table} from 'antd';
import React from 'react';

import {EditableCell} from "app/components/ServiceLevelAgreementComp/EdiatableCell";
import { EditableFormRow } from './EditableRow';
import { ColumnProps } from 'antd/lib/table';

export const EditableContext = React.createContext({ form: {} });
const data: any[] = [];

    data.push({
        key:1,
        name: `Edrward `,
        dateandtime: `2020-5-4 `,

    });

interface State {
    data: any;
    editingKey: any;
}
interface ColumnPropsEditable<T> extends ColumnProps<T> {
    editable?: boolean;
}

export class EditableTable extends React.Component<{}, State> {
    private columns: Array<ColumnPropsEditable<any>>;
    constructor(props: {}) {
        super(props);
        this.state = { data, editingKey: '' };
        this.columns = [
            {
                title: 'Service',
                dataIndex: 'name',
                width: '150',
                editable: true,

            },
            {
                title: 'Date',
                dataIndex: 'dateandtime',
                width: '100',
                render: (key: any, rec: any) => {
                    return (
                        <span>

                            <DatePicker />

              </span>
                    );
                },
                editable: true
            },

            {
                title: 'Action',
                width: '100',
                dataIndex: 'operation',
                render: (text: string, record: any) => {
                    const editable = this.isEditing(record);
                    return (
                        <div>
                            {editable ? (
                                <span>
                                    <EditableContext.Consumer>
                                        {form => (
                                            <a
                                                href="javascript:;"
                                                onClick={() => this.save(form, record.key)}
                                                style={{ marginRight: 8 }}
                                            >
                                                Save
                                            </a>
                                        )}
                                    </EditableContext.Consumer>
                                    <Popconfirm
                                        title="Sure to cancel?"
                                        onConfirm={() => this.cancel()}
                                    >
                                        <a>Cancel</a>
                                    </Popconfirm>
                                </span>
                            ) : (
                                <a onClick={() => this.edit(record.key)}>Edit</a>
                            )}
                        </div>
                    );
                }
            }
        ];
    }

    public isEditing = (record: any) => record.key === this.state.editingKey;

    public cancel = () => {
        this.setState({ editingKey: '' });
    }

    public save(form: any, key: any) {
        form.validateFields((error: any, row: any) => {
            if (error) {
                return;
            }
            const newData = [...this.state.data];
            const index = newData.findIndex(item => key === item.key);
            if (index > -1) {
                const item = newData[index];
                newData.splice(index, 1, {
                    ...item,
                    ...row
                });
                this.setState({ data: newData, editingKey: '' });
            } else {
                newData.push(row);
                this.setState({ data: newData, editingKey: '' });
            }
        });
    }

    public edit(key: any) {
        this.setState({ editingKey: key });
    }

    public render() {
        const components = {
            body: {
                row: EditableFormRow,
                cell: EditableCell
            }
        };

        const columns = this.columns.map((col: any) => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: (record: any) => ({
                    record,
                    inputType: col.dataIndex === 'dateandtime' ? 'any' : 'date',
                    dataIndex: col.dataIndex,
                    title: col.title,
                    editing: this.isEditing(record)
                })
            };
        });

        return (
            <Table
                components={components}
                bordered
                dataSource={this.state.data}
                columns={columns}
                // rowClassName="editable-row"
            />
        );
    }
}

EditableRow.tsx

// tslint:disable:no-any
import { Form } from 'antd';
import React from 'react';
import { EditableContext } from './EditableTable';

const EditableRow = ({ form, index, ...props }: any) => (
    <EditableContext.Provider value={form}>
        <tr {...props} />
    </EditableContext.Provider>
);

export const EditableFormRow = Form.create()(EditableRow);

EdiatableCell.tsx

// tslint:disable:no-any
import {DatePicker, Form, Input,} from 'antd';
import React from 'react';
import { EditableContext } from './EditableTable';

const FormItem = Form.Item;

export class EditableCell extends React.Component<any, {}> {
    public getInput = () => {
        if (this.props.inputType === 'string') {
            return   <DatePicker/>;
        }
        return <Input />;
    }

    public render() {
        const {
            editing,
            dataIndex,
            title,
            inputType,
            record,
            index,
            ...restProps
        } = this.props;
        return (
            <EditableContext.Consumer>
                {(form: any) => {
                    const { getFieldDecorator } = form;
                    return (
                        <td {...restProps}>
                            {editing ? (
                                <FormItem style={{ margin: 0 }}>
                                    {getFieldDecorator(dataIndex, {
                                        rules: [{
                                            required: true,
                                            message: `Please Input ${title}!`
                                        }],
                                        initialValue: record[dataIndex]
                                    })(this.getInput())}
                                </FormItem>
                            ) : restProps.children}
                        </td>
                    );
                }}
            </EditableContext.Consumer>
        );
    }
}
export const EditableFormCell = Form.create()(EditableCell);