antD 结束时间不能小于开始时间

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: ‘测站名称‘,
                    dataIndex: ‘stnm‘,
                    width: ‘10%‘,
                    align: ‘center‘
                },
                {
                    title: ‘时间‘,
                    dataIndex: ‘time‘,
                    width: ‘12%‘,
                    align: ‘center‘
                },
                {
                    title: ‘水位‘,
                    dataIndex: ‘waterL‘,
                    width: ‘5%‘,
                    align: ‘right‘
                },
                {
                    title: ‘水量(m³)‘,
                    dataIndex: ‘waterV‘,
                    width: ‘7%‘,
                    align: ‘right‘
                },
                {
                    title: ‘断面过水面积(m²)‘,
                    dataIndex: ‘dmws‘,
                    width: ‘8%‘,
                    align: ‘right‘
                },
                {
                    title: ‘断面平均流速(m/s)‘,
                    dataIndex: ‘dmavgfr‘,
                    width: ‘8%‘,
                    align: ‘right‘
                },
                {
                    title: ‘断面最大流速(m/s)‘,
                    dataIndex: ‘dmmaxfr‘,
                    width: ‘10%‘,
                    align: ‘right‘
                },
                {
                    title: ‘河水特征码‘,
                    dataIndex: ‘bsnm‘,
                    width: ‘8%‘,
                    align: ‘center‘
                },
                {
                    title: ‘水势‘,
                    dataIndex: ‘waters‘,
                    align: ‘center‘
                },
                {
                    title: ‘测流方法‘,
                    dataIndex: ‘clmonthod‘,
                    width: ‘6%‘,
                    align: ‘center‘
                },
                {
                    title: ‘测积方法‘,
                    dataIndex: ‘cjff‘,
                    width: ‘6%‘,
                    align: ‘center‘
                },
                {
                    title: ‘测速方法‘,
                    dataIndex: ‘csmonthod‘,
                    width: ‘6%‘,
                    align: ‘center‘
                }
            ]
        }
    }

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

    initEcharts = () => {
        // 绘制图表
        const option = {
            title: {
                text: ‘河道水情来报维护折线图‘,
                x: ‘center‘,
                y: ‘top‘,
                textAlign: ‘left‘,
                top: 10,
                left: ‘left‘
            },
            tooltip: {
                trigger: ‘axis‘
            },
            // legend: {
            //     data: [‘齐齐哈勒克‘, ‘坝上‘, ‘出库‘, ‘且末‘]
            // },
            calculable: true,
            xAxis: [
                {
                    type: ‘category‘,
                    boundaryGap: false,
                    data: [‘齐齐哈勒克‘, ‘坝上‘, ‘出库‘, ‘且末‘]
                }
            ],
            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 + ‘,‘
                }
            })
            confirm({
                title: ‘提示‘,
                content: ‘确认要删除？‘,
                okText: ‘确认‘,
                cancelText: ‘取消‘,
                onOk() {
                    self.delBtnFn(ids)
                }
            })
        } else {
            message.warn(‘请选择一条数据‘)
        }
    }

    delBtnFn = (ids) => {
        console.log(ids)
        message.success(‘删除成功‘, 3)
        this.getTableData(‘‘)
        this.setState({
            selectedRowKeys: []
        })
    }
    onChangeStartTime = (value, dateString) => {
        const param = { value, dateString }
        this.setState({
            startTime: param.dateString
        })
    }
    onChangeEndTime = (value, dateString) => {
        const param = { value, dateString }
        this.setState({
            endTime: param.dateString
        })
    }
     // 设置开始日期不能选择的时间
    disabledStartDate = current => {
        if (this.state.endTime) {
            return current > Date.now() || current > new Date(this.state.endTime).getTime()
        } else {
            return current > Date.now()
        }
     }

    // 设置结束不能选择的时间
     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>
                        <Col sm={24} md={6} >
                            <FormItem label=‘测站编码‘>
                                <Input placeholder=‘测站编码‘ id=‘stnm‘ value={this.state.stcd} onChange={this.getQueryStnm} />
                            </FormItem>
                        </Col>
                        <Col sm={24} md={6} >
                            <FormItem label=‘开始时间‘ style={{ width: ‘100%‘ }}>
                               <DatePicker showTime placeholder=‘请选择开始时间‘ 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=‘请选择结束时间‘  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}>重置</Button>
                        </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>
        )
    }
}

原文地址：https://www.cnblogs.com/whlBooK/p/11526335.html