React+Ant design日期组件DatePicker设置结束时间不能小于开始时间

import React, { Component } from 'react'
import { DatePicker, Button } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
export default class TimelineCom extends Component {
    state = {
        startValue: null,
        endValue: null,
        endOpen: false,
    }

    //设置开始日期不能选择的时间
    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()
    }

    render() {
        return (
            <div>
                <DatePicker
                    //是否显示今天
                    showToday={false}
                    //设置开始日期
                    disabledDate={this.disabledStartDate}
                    //格式化时间的
                    // format="YYYY-MM-DD HH:mm:ss"
                    format="YYYY-MM-DD"
                    //state中申明一个默认的开始时间为null
                    value={this.state.startValue}
                    placeholder='开始日期'
                    onChange={this.onStartChange}
                    onOpenChange={this.handleStartOpenChange}
                    locale={locale}
                />
                <DatePicker
                    //是否显示今天
                    showToday={false}
                    //设置结束不能选择的时间
                    disabledDate={this.disabledEndDate}
                    //格式化时间的
                    // format="YYYY-MM-DD HH:mm:ss"
                    format="YYYY-MM-DD"
                    //state中申明一个默认的结束时间为null
                    value={this.state.endValue}
                    placeholder='结束日期'
                    onChange={this.onEndChange}
                    open={this.state.endOpen}
                    onOpenChange={this.handleEndOpenChange}
                    locale={locale}
                />
                <Button
                    onClick={this.getAllValue}
                    id="btn-search"
                    type="primary"
                    size="small">查询
                </Button>
            </div>
        )
    }
}

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值