react+antd日期选择限制 react+antd日期选择限制

1.开发环境 react
2.电脑系统 windows11专业版
3.在开发的过程中,我们可能会需要时间限制,下面我来分享一下方法,希望对你有所帮助。
4.废话不多说,直接上代码:

{ dateTypeValue =https://www.it610.com/article/= 2 ? { setDateTime(dateStrings) }} onCalendarChange={(val) => setDateTimeValue(val)}allowClear={false} getPopupContainer={triggerNode => triggerNode.parentElement} value=https://www.it610.com/article/{dateTimeValue} disabledDate={month_disabledDate} onOpenChange={onOpenChange} /> : { setDateTime(dateStrings) }} allowClear={false} onCalendarChange={(val) => setDateTimeValue(val)} getPopupContainer={triggerNode => triggerNode.parentElement} value=https://www.it610.com/article/{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=https://www.it610.com/article/{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') }

【react+antd日期选择限制】9.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。