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