AntD end time can not be less than the start time

import React from 'react'
import { Layout, Row, Button, Table, DatePicker, Form, Col, Input, message, Modal } from 'antd'
import ModalCon from './addEdit'
import ReactEcharts from 'echarts-for-react'
import '../riverWater.less'
import { queryByPage } from '@api/RiverWater/reportProtect'

const { Header, Content, Footer } = Layout
const FormItem = Form.Item

export interface IProps {

}

interface IState {
    columns?: any
    loading?: boolean
    tableData?: any
    pagination?: any
    height: number
    stcd?: any
    stnm?: any
  
    treeData?: any
    selectedRowKeys?: any
    selectedRows?: any
    type: string
    isShow: boolean
    startTime: any
    endTime: any
    echartsOption?: any
}

export default class StationInfo extends React.Component<IProps, IState> {

    constructor(props: IProps) {
        super(props)
        this.state = {
            isShow: false,
            loading: false,
            tableData: [],
            height: 400,
            startTime: '',
            endTime: '',
            pagination: {
                showSizeChanger: true,
                showQuickJumper: true,
                current: 1,
                pageSize: 15,
                total: 0,
                showTotal: (total: any) => `共${total} 条`,
                pageSizeOptions: ['15', '30', '45']
            },
            stcd: '',
            stnm: '',
         
         
            treeData: [],
            selectedRowKeys: [],
            selectedRows: [],
            type: '',
            echartsOption: {},
            columns: [
                {
                    title: '测站编码',
                    dataIndex: 'stcd',
                    width: '6%',
                    align: 'center'
                },
                {
                    title: 'station name' 
                    dataIndex The: 'stnm', 
                    width: '10% ', 
                    align = left:' Center ' 
                }, 
                { 
                    title:' time ', 
                    dataIndex The:' Time ', 
                    width: '12%', 
                    align = left: 'Center' 
                }, 
                { 
                    title: 'water', 
                    dataIndex The: 'waterL', 
                    width: '%. 5', 
                    align = left: 'right' 
                },
                { 
                    Title: 'the amount of water (m³)',
                    dataIndex The: 'waterV', 
                    width: '7%',
                    align = left: 'right' 
                }, 
                { 
                    title: 'cross-sectional flow areas (m²)', 
                    dataIndex The: 'dmws', 
                    width:'. 8% ', 
                    align = left:' right ' 
                }, 
                { 
                    title:' mean velocity (m / S) ', 
                    dataIndex The:' dmavgfr ', 
                    width:'. 8% ', 
                    align = left:' right ' 
                }, 
                { 
                    title:' cross section of maximum velocity (m / S) ', 
                    dataIndex The:'dmmaxfr',
                    width: '10%',
                    align = left: 'right' right'
                },
                { 
                    title: 'water signature', 
                    dataIndex The: 'bsnm', 
                    width: '. 8%', 
                    align = left: 'Center' 
                }, 
                { 
                    title: 'Potential', 
                    dataIndex The: 'Waters', 
                    align = left:' Center ' 
                }, 
                { 
                    title:' flow measurement ', 
                    dataIndex The:' clmonthod ', 
                    width:'%. 6 ', 
                    align = left:' Center ' 
                },
                {
                    title: '测积方法',
                    Data Index: 'cjff'
                    width: '6%',
                    align: 'center'
                },
                {
                    title: '测速方法',
                    dataIndex: 'csmonthod',
                    width: '6%',
                    align: 'center'
                }
            ]
        }
    }

    handleClick = (row: object) => {
        this.setState({
            isShow: true,
            type: 'detail',
            selectedRows: [row]
        })
    }

    

   

    initEcharts = () =>{ 
        // Draw chart
        Option = {const
            title: {
                text: 'Flood packets to maintain a line graph', 
                X: 'Center', 
                Y: 'Top', 
                textAlign: 'left', 
                Top: 10, 
                left: 'left' 
            }, 
            ToolTip: { 
                Trigger: 'Axis' 
            }, 
            // Legend: { 
            // Data: [ '齐齐哈勒克', 'dam', 'library', 'Qiemo'] 
            //}, 
            calculable: to true, 
            XAXIS: [ 
                { 
                    type: ' category ', 
                    boundaryGap: to false, 
                    Data: ['齐齐哈勒克','Dam', 'library', 'Qiemo'] 
                }
            ],
            yAxis: [
                {
                    name: '水位(m)',
                    nameLocation: 'middle',
                    nameRotate: 90,
                    nameGap: 40,
                    nameTextStyle: {
                        fontSize: 13
                    }
                }
            ],
            series: [
                {
                    name: '水位',
                    type: 'line',                   
                    data: [89.2, 78.2, 56.1, 47.6]
                }
            ]
        }
        return option
    }
    componentDidMount = () => {
        const contentHeight = document.getElementById('js-page-content')!.offsetHeight
        this.setState({
            height: contentHeight - 450,
            echartsOption: this.initEcharts()
        })
        this.getTableData('')
    }
    getTableData = (stcd) => {
        const { pagination } = this.state
        const param = {
            stcd,
            page: 1, 
            rows: pagination.pageSize
        }
        queryByPage(param).then((res: any) => {
            console.log(res)
        })
        // this.setState({
        //     loading: true
        // })
        // fetch('./RiverWater/reportProtect.json').then(res => res.json()).then(json => {
        //     const { pagination } = this.state
        //     this.setState({
        //         tableData: json.data.records,
        //         loading: false,
        //         pagination: {
        //             showSizeChanger: true,
        //             showQuickJumper: true,
        //             current: pagination.current,
        //             pageSize: pagination.pageSize,
        //             total: json.data.total,
        //             showTotal: (total: any) => `共${total} 条`
        //         }
        //     })
        // })
    }


    handleReset = (e) => {
        e.preventDefault()
        this.setState({
            stcd: '',
           
         
        })
    }

    handleTableChange = (pagination) => {
        this.setState({ pagination }, () => {
            this.getTableData('')
        })
    }

    getQueryStnm = (e) => {
        e.preventDefault()
        if (e.target.value.length > 8) {
            message.warn('请输入8位测站编码')
            const text = e.target.value.slice(0, 8)
            this.setState({
                stcd: text
              })
        } else {
            this.setState({
                stcd: e.target.value
              })
        }
    }

    onSelectChange = (selectedRowKeys, selectedRows) => {
        this.setState({
            selectedRowKeys,
            selectedRows
        })
    }

    setFn = () => {
        this.setState({
            isShow: false,
            loading: true
        })
        this.getTableData('')
    }

    addBtn = () => {
        this.setState({
            isShow: true,
            type: 'add'
        })
    }

    editBtn = () => {
        if (this.state.selectedRowKeys.length === 1) {
            this.setState({
                isShow: true,
                type: 'edit'
            })
        } else {
            message.error('请选择一条数据进行编辑')
        }
    }

    delBtn = (e) => {
        e.preventDefault()
        const self = this
        const confirm = Modal.confirm
        const { selectedRowKeys } = this.state
        if (selectedRowKeys.length > 0) {
            let ids = ''
            selectedRowKeys.forEach((item, index) => {
                ids = ids + item
                if (index < selectedRowKeys.length - 1) {
                    IDS = IDS 
        this.getTableData ( '') 
        the this.setState({
            selectedRowKeys: []+ ','
                }
            }) 
            Confirm The ({ 
                title: 'prompt', 
                Content: '? Sure you want to delete', 
                okText: 'confirmation', 
                CancelText: 'Cancel', 
                the OnOK () { 
                    self.delBtnFn (IDS) 
                } 
            }) 
        } {the else 
            the Message. warn ( 'select a data') 
        } 
    } 

    delBtnFn = (IDS) = > { 
        the console.log (IDS) 
        message.success ( 'successfully deleted',. 3) 
        }) 
    } 
    onChangeStartTime = (value, dateString) => { 
        const param = {value, dateString}
        this.setState ({ 
            the startTime: param.dateString 
        }) 
    } 
    onChangeEndTime = (value, dateString) => { 
        const value param = {,} dateString 
        this.setState ({ 
            endTime: param.dateString 
        }) 
    } 
     // not set a start date selected time 
    disabledStartDate = Current => { 
        IF (this.state.endTime) { 
            return Current> Date.now () || Current> new new a Date (this.state.endTime) .getTime () 
        } the else { 
            return Current> a Date .now () 
        } 
     } 

    // set the end time can not be selected 
     disabledEndDate = current => {
        return current < new Date(this.state.startTime).getTime()  || current > Date.now()
      }
    render() {
        const { columns, pagination, loading, tableData, selectedRowKeys } = this.state
        const rowSelection = {
            loading: true,
            selectedRowKeys,
            onChange: this.onSelectChange
        }
        return (
            <Layout className='bodyClass'>
                <Form layout='inline' className='queryForm'>
                    <Row>
                        <With theSM = {24} MD = {}. 6 > 
                            < the FormItem label = 'coding stations' > 
                                < the Input placeholder = 'coding stations' ID = 'stnm' value = {} this.state.stcd the onChange = {this.getQueryStnm } /> 
                            </ the FormItem > 
                        </ CoI > 
                        < CoI SM = {24} MD = {. 6} > 
                            < the FormItem label = 'start time' style = {{ width: '100%'}} > 
                               the DatePicker the showTime placeholder = 'Please select a start time '<disabledDate={this.disabledStartDate} onChange={this.onChangeStartTime}  />
                                {/* <RangePicker style={{ width: '100%' }} format='YYYY-MM-DD' /> */}
                            </FormItem>
                        </Col>
                        <Col sm={24} md={6} >
                            <FormItem label='结束时间' style={{ width: '100%' }}>
                               <DatePicker showTime placeholder='Please select the end of time '  disabledDate={this.disabledEndDate} onChange={this.onChangeEndTime}  />
                            </FormItem>
                        </Col>
                        <Col sm={24} md={6} className='user_btn' >
                            <Button className='searchBtn' icon='search' onClick={this.getTableData}>查询</Button>
                            <Button className='resetBtn' icon='reload' onClick={this.handleReset}></ResetButton>
                        </Col>
                    </Row>
                    {/* <Row>
                        <Col sm={24} md={6} >
                            <FormItem label='选择时间' style={{ width: '100%' }}>
                                <RangePicker style={{ width: '100%' }} format='YYYY-MM-DD' />
                            </FormItem>
                        </Col>
                    </Row> */}
                </Form>
                <Content className='contentLayout'>
                    <Header className='contentHeader'>
                        <Row>
                            <Button onClick={this.addBtn}>新增</Button>
                            <Button onClick={this.editBtn}>编辑</Button>
                            <Button onClick={this.delBtn}>删除</Button>
                        </Row>
                    </Header>
                    <Table
                        columns={columns}
                        rowKey='stcd'
                        pagination={pagination}
                        loading={loading}
                        dataSource={tableData}
                        rowSelection={rowSelection}
                        onChange={this.handleTableChange}
                        scroll={{ x: true, y: 300 }}
                        bordered
                    />
                    <ModalCon
                        isShow={this.state.isShow}
                        setFn={this.setFn}
                        type={this.state.type}
                        rowData={this.state.selectedRows![0]}
                    />
                </Content>
                <Footer className='contentLayout' style={{height: this.state.height}}>
                    <div id='histogram' className='containerDiv'>
                        <ReactEcharts
                            option={this.state.echartsOption}
                            theme='clear'
                            style={{ width: '100%', height: '100%' }}
                        />
                    </div>
                </Footer>

            </Layout>
        )
    }
}