react+antd日期选择限制

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.月效果如下:
image.png

7.日效果如下:
image.png

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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

某,从来都不相信所谓的天赋和天才,只有不断努力的平凡人。只要内心是坚定的,就会有所收获;失败会让我们...

48 声望
1 粉丝
0 条评论
推荐阅读
vue+element upload组件上传多次调用接口(解决方案)
1.开发环境 vue+element2.电脑系统 windows11专业版3.在使用element的过程中,遇到upload组件上传多次调用接口,下面我来分享一下解决方法:

灰太狼的情与殇阅读 206

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.4k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功13阅读 1.6k评论 1

封面图
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理
在上篇 2022 你还不会微前端吗 (上) — 从巨石应用到微应用 中已经了解了微前端的由来和基本使用,也提到了一些相关的原理,本篇文章为下篇主要从原理层面进行解析,然后再自己实现一个包含核心部分的微前端框架。

熊的猫8阅读 1.1k

封面图
如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

破晓L6阅读 1.7k

某,从来都不相信所谓的天赋和天才,只有不断努力的平凡人。只要内心是坚定的,就会有所收获;失败会让我们...

48 声望
1 粉丝
宣传栏