关于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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。