Antd的DatePicker组件实现日期范围只能选择31天，超出置灰

效果图：

完整代码：

import React from 'react';
import { DatePicker,ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import moment from 'moment';
const {RangePicker} = DatePicker;

class SelectTime extends React.Component{
    state={
        dates:[],//选中时间
    }
    // componentWillReceiveProps(np,ns){
    //     this.setState({dates:np.dates})
    // }
    //是否隐藏
    disabledDate=(current)=>{
        // console.log("日期列表 单个",current)
        let {dates}=this.state
        if (!dates || dates.length === 0) {
            return false;
        }
        let startTime=dates[0]
        const start=startTime && startTime.format("YYYYMMDD") > current.format("YYYYMMDD")
        const end=startTime && moment(startTime).add(30,'days').format("YYYYMMDD") < current.format("YYYYMMDD")
        return start || end;
    }
    //选中时间时
    CalendarChange=(value)=>{
        // console.log("选中日期",value)
        this.setState({dates:value})
        this.props.gxDates(value)
    }
    change=(value)=>{
        if(value.length==0){
            this.setState({dates:[]})
        }
    }
    render(){
        const {dates}=this.state
        return (
            <ConfigProvider locale={zh_CN}>
                <RangePicker value={dates} ref="time" disabledDate={this.disabledDate} onCalendarChange={this.CalendarChange} onChange={this.change} />
            </ConfigProvider>
        )
    }
}

export default SelectTime;

主要使用DatePicker组件的RangePicker，用于做时间范围选择。

disabledDate记录该日期是否隐藏。

onCalendarChange为选中时间时的事件。

onChange为时间段被改变时的时间，可以用做更改时间段时先清空的效果。

state中的dates为这个时间段的数组，类型为moment。

moment这里的30表示间隔30，days为天。

ConfigProvider用于做中文国际化。