react+antd 时间选择器DatePicker限制时间选择范围

一.时间跨度最多一年

this.state = {
            startDate: null,
            endDate: null,
            endOpen: false
 }
render() {
 
        const { startDate, endDate, endOpen} = this.state
        const disabledStartDate = startDate => {
            const { endDate } = this.state;
            if (!startDate || !endDate) {
                return false;
            }
            return startDate.valueOf() > endDate.valueOf();
        };
        const disabledEndDate = endDate => {
            const { startDate } = this.state;
            if (!endDate || !startDate) {
                return false;
            }
            return endDate.valueOf() <= startDate.valueOf() || endDate.diff(startDate, 'days') > 365;//时间跨度最多365天
        };

        const onChange = (field, value) => {
            this.setState({
                [field]: value,
            });
        };

        const onStartChange = value => {
            onChange('startDate', value);
        };

        const onEndChange = value => {
            onChange('endDate', value);
        };

        const handleStartOpenChange = open => {
            if (!open) {
                this.setState({ endOpen: true });
            }
        };

        const handleEndOpenChange = open => {
            this.setState({ endOpen: open });
        };
        return (
            <div>
                            <DatePicker
                                disabledDate={disabledStartDate}
                                format="YYYY-MM-DD"
                                value={startDate}
                                placeholder="开始日期"
                                onChange={onStartChange}
                                onOpenChange={handleStartOpenChange}
                                style={{ marginRight: '10px' }}
                            />
                            <DatePicker
                                disabledDate={disabledEndDate}
                                format="YYYY-MM-DD"
                                value={endDate}
                                placeholder="结束日期"
                                onChange={onEndChange}
                                open={endOpen}
                                onOpenChange={handleEndOpenChange}
                                style={{ marginRight: '33px' }}
                            />
             </div>
      );

二.指定时间范围内

const disabledDate = (current) => {
		 //均采用diff写法会导致可选范围比预定的时间范围多一天，比如期望时间范围是9.1-10.1，但是diff写法下8.31也是可选的
		 //不采用diff写法的话又会导致期望范围只有一天的情况下这一天无法选择，如期望时间范围是9.1，但是9.1这一天无法选择
		 //最终写法结合使用
         //const tooLate = current && current > moment(PatrolOrderByIdData.patrolEndDate);
         const tooLate = PatrolOrderByIdData.patrolEndDate && current.diff(moment(PatrolOrderByIdData.patrolEndDate), 'days') > 0;
         // const tooEarly = PatrolOrderByIdData.patrolStartDate && moment(PatrolOrderByIdData.patrolStartDate).diff(current, 'days') > 0;//这个写法会导致比预定的时间范围多一天
         const tooEarly = current && current < moment(PatrolOrderByIdData.patrolStartDate);
         return tooEarly || tooLate;
}
        
<DatePicker
       format="YYYY-MM-DD"
       disabledDate={disabledDate}
       onChange={this.onChange}
/>