react结合antd日期组件使用方法（结束时间不能小于开始时间）

需求：实现开始和结束时间的选择，并且选择开始时间之后，结束时间不能小于开始时间，或者说先选择了结束时间，开始时间选择的时候只能小于结束时间，不能选择的日期禁用

import { Button, DatePicker } from 'antd'
class DatePickers extends React.Component {
    constructor() {
        super()
        this.state = {
            startValue: null,
            endValue: null,
            endOpen: false,
        }
    }
   render() { 
        return (
		 <Datapickerbox className="data-pickerbox">
                    <DatePicker
                    	//是否显示今天
                        showToday={false}
                        //设置开始日期
                        disabledDate={this.disabledStartDate}
                        //格式化时间的
                        format="YYYY-MM-DD HH:mm:ss"
                        //state中申明一个默认的开始时间为null
                        value={this.state.startValue}
                        placeholder='开始日期'
                        onChange={this.onStartChange}
                        onOpenChange={this.handleStartOpenChange}
                    />
                </Datapickerbox>
                <Datapickerbox className="data-pickerbox">
                    <DatePicker
                    	//是否显示今天
                        showToday={false}
                        //设置结束不能选择的时间
                        disabledDate={this.disabledEndDate}
                        //格式化时间的
                        format="YYYY-MM-DD HH:mm:ss"
                        //state中申明一个默认的结束时间为null
                        value={this.state.endValue}
                        placeholder='结束日期'
                        onChange={this.onEndChange}
                        open={this.state.endOpen}
                        onOpenChange={this.handleEndOpenChange}
                    />
                </Datapickerbox>
                                <Button
                    					onClick={this.getAllValue}
                   						 id="btn-search"
                    					type="primary"
                    					size="small">查询
                			</Button>
                    )
    }    
     //设置开始日期不能选择的时间
    disabledStartDate = startValue => {
        const { endValue } = this.state
        if (!startValue || !endValue) {
            return false
        }
        return startValue.valueOf() > endValue.valueOf()
 	   }
 	   
	//设置结束不能选择的时间
	 disabledEndDate = endValue => {
        const { startValue } = this.state
        if (!endValue || !startValue) {
            return false
        }
        return endValue.valueOf() <= startValue.valueOf()
  	  }
    //触发组件改变默认value
    onChange = (field, value) => { 
        this.setState({
            [field]: value,
        })
    }

	onStartChange = value => {
        this.onChange('startValue', value)
    }
    onEndChange = value => {
        this.onChange('endValue', value)
    }
    handleStartOpenChange = open => {
        //设置开始的弹出框
        if (!open) {
            this.setState({ endOpen: true })
        }
    }
    handleEndOpenChange = open => {
        //结束的弹出框
        this.setState({ endOpen: open })
    }
    //最后就可以打印到获取的时间了
    getAllValue=()=>{
        console.log(this.state.startValue, this.state.endValue)
       // 如果想转时间戳可以  
       this.state.startValue._d.getTime()
    }
}
export default DatePickers

以上就是完整代码，希望能帮到需要的朋友