antD 结束时间不能小于开始时间
Posted whlbook
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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> )
以上是关于antD 结束时间不能小于开始时间的主要内容，如果未能解决你的问题，请参考以下文章
antd 两个 DatePicker 组件实现起止时间相互约束的流程