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用於做中文國際化。