关于react.js:reactantd日期选择限制

1. 开发环境 react
2. 电脑系统 windows11 专业版
3. 在开发的过程中, 咱们可能会须要工夫限度, 上面我来分享一下办法, 心愿对你有所帮忙。
4. 废话不多说, 间接上代码:

{dateTypeValue == 2 ? <RangePicker picker="month" onChange={(dates, dateStrings) => {setDateTime(dateStrings)
}} onCalendarChange={(val) => setDateTimeValue(val)}   allowClear={false} getPopupContainer={triggerNode => triggerNode.parentElement} value={dateTimeValue} disabledDate={month_disabledDate} onOpenChange={onOpenChange} /> :
<RangePicker onChange={(dates, dateStrings) => {setDateTime(dateStrings)
}} allowClear={false} onCalendarChange={(val) => setDateTimeValue(val)} getPopupContainer={triggerNode => triggerNode.parentElement} value={dateTimeValue} disabledDate={day_disabledDate} onOpenChange={onOpenChange}/>
}

// 留神: 这里是通过 dateTypeValue 的值来判断展现 月日期 还是 具体日 日期 

const [dateTimeValue,setDateTimeValue] = useState(null);

/* 日期禁用 解决 */
    const month_disabledDate = (current) => {if (!dateTimeValue) {return false;}

        const tooLate = dateTimeValue[0] && current.diff(dateTimeValue[0], 'months') > 11;
        const tooEarly = dateTimeValue[1] && dateTimeValue[1].diff(current, 'months') > 11;
        return !!tooEarly || !!tooLate;
    };

    const day_disabledDate = (current)=>{if (!dateTimeValue) {return false;}

        const tooLate = dateTimeValue[0] && current.diff(dateTimeValue[0], 'days') > 30;
        const tooEarly = dateTimeValue[1] && dateTimeValue[1].diff(current, 'days') > 30;
        return !!tooEarly || !!tooLate;
    }



    const onOpenChange = (open) => {if (open) {setDateTimeValue([null, null]);
        }
    };

5. 要害代码:

onCalendarChange={(val) => setDateTimeValue(val)}
value={dateTimeValue} 
disabledDate={month_disabledDate} 
onOpenChange={onOpenChange}

6. 月成果如下:

7. 日成果如下:

8. 扩大:

const DisabledDate = (current) => {
    // // 限度为前后一周
    // return current < moment().subtract(7, "days") || current > moment().add(7, 'days')
    // 限度为前后一周
    // return current < moment().subtract(1, "weeks") || current > moment().add(1, 'weeks')
    // 限度为前后一月
    // return current < moment().subtract(1, "months") || current > moment().add(1, 'months')
    // 限度为前后一年
    // return current < moment().subtract(1, "years") || current > moment().add(1, 'years')

    // // 限度为前后 12 月
    return current < moment().subtract(12, "months") || current > moment().add(12, 'months')
}

9. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。