限制选择时间区间

csdn — React中antd日期选择框选择时间区间,禁用时间 — EasonDayuan 博客园 — antd-design日期组件DatePicker不可用时间disabledDate设置 — 潇湘羽西

import React from 'react';
import {Button, Space, DatePicker} from 'antd';
import moment from 'moment';
import style from './style.less';
const {RangePicker} = DatePicker;
class DateSelectionBtn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            BtnFocus: '今日',
            RangePickerDay: [],
            dates: [],
            hackValue: []
        };
    }
    componentDidMount() {
        this.handleechartBoxButton('今日');
    }
    // 日期相关
    handleechartBoxButton = type => {
        const dayMap = {
            今日: [moment().startOf('day'), moment().endOf('day')],
            七日: [moment().subtract(7, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')],
            三十日: [moment().subtract(30, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')]
        };
        this.props.getTime(dayMap[type]);
        this.setState({
            BtnFocus: type,
            RangePickerDay: dayMap[type],
            hackValue: dayMap[type]
        });
    };
    RangePickerSetDates = value => {
        this.setState({dates: value});
    };
    RangePickerSetValue = value => {
        const time = value;
        const today = moment().subtract(1, 'day').endOf('day').valueOf();
        if (today <= value[0].valueOf()) time[0] = moment();
        if (today <= value[1].valueOf()) time[1] = moment();
        this.props.getTime(time);
        this.setState({RangePickerDay: time, hackValue: time});
    };
    disabledDate = current => {
        const {dates} = this.state;
        if (!dates || dates.length === 0) return false;
        const tooLate = dates[0] && current.diff(dates[0], 'days') > 90;
        const tooEarly = dates[1] && dates[1].diff(current, 'days') > 90;
        return tooEarly || tooLate;
    };
    RangePickeronOpenChange = open => {
        if (open) {
            this.setState({
                dates: [],
                hackValue:[]
            });
        } else {
            this.setState({
                hackValue: undefined
            });
        }
    };
    render() {
        const {BtnFocus, hackValue, RangePickerDay} = this.state;
        const {btnShow = false, RangePickerShow = true} = this.props;
        return (
            <>
                {btnShow && (
                    <div className={style.BtnFocusBox}>
                        <span>最近时间：</span>
                        <Space size={12}>
                            <Button
                                onClick={() => {
                                    this.handleechartBoxButton('今日');
                                }}
                                className={`${BtnFocus == '今日' && style.BtnFocus}`}>
                                今日
                            </Button>
                            <Button
                                onClick={() => {
                                    this.handleechartBoxButton('七日');
                                }}
                                className={`${BtnFocus == '七日' && style.BtnFocus}`}>
                                七日
                            </Button>
                            <Button
                                onClick={() => {
                                    this.handleechartBoxButton('三十日');
                                }}
                                className={`${BtnFocus == '三十日' && style.BtnFocus}`}>
                                三十日
                            </Button>
                        </Space>
                    </div>
                )}
                {RangePickerShow && (
                    <div>
                        <span>自定义时间：</span>
                        <RangePicker
                            disabledDate={this.disabledDate}
                            onCalendarChange={val => this.RangePickerSetDates(val)}
                            onChange={val => this.RangePickerSetValue(val)}
                            onOpenChange={this.RangePickeronOpenChange}
                            value={hackValue || RangePickerDay}
                        />
                    </div>
                )}
            </>
        );
    }
}
 
export default DateSelectionBtn;