美文网首页
记一笔之:antd 的 RangePicker 设置 disab

记一笔之:antd 的 RangePicker 设置 disab

作者: 文艺的小唐 | 来源:发表于2019-07-30 19:05 被阅读0次

    之前项目中,遇到一个需求,就是 RangePicker 中,只有 今天以及之后的时间可选,按照 antd 上那个案例的代码:

    disabledDate = current => {
        return current && current < moment().endOf('day')
    }
    

    是不行的。。。因为以上代码,即使不要 current && ,你也会发现,今天的这天同样是不可选的,所以就在想,你搞个 current && 有毛用???所以特意去尝试了一下,发现今天以及之后的时间可选的这个需求,可以直接:

     return current < moment(new Date(moment().format('YYYY/MM/DD')))   // 或者
     return current < moment(moment().format('YYYY/MM/DD'))
    

    对 antd 这个例子有疑问的,还有就是,在codepen上,也没有看到引入 moment 依赖包,怎么直接就可以 moment 呢?当然这是个小问题,可能 antd 内部处理过,不过我们使用的时候,最好还是引进来。
    不过以上问题,引出了一个普遍的问题,就是如何任意限定一个可选的日期范围(这儿暂时不讨论时分秒这些单位)?
    经过尝试,发现有两种方式,比如:今天、前 3 天、后 2 天这 6 天是可选的 这个需求:
    方法一:

    disabledDate = current => {
        return current < moment().subtract(4, 'days') || current > moment().add(2, 'days')
    }
    

    方法二:

     disabledDate = current => {
          return current < moment(moment(new Date().getTime() - 1000 * 60 * 60 * 24 * 3).format('YYYY/MM/DD')) ||
                    current > moment(moment(new Date().getTime() + 1000 * 60 * 60 * 24 * 3).format('YYYY/MM/DD'))
     };
    

    很明显,方法二略傻,不过我这儿没有列出来 moment 的其他一些在这里有用的api,建议自己去看看 moment 常用的一些方法,收工!

    相关文章

      网友评论

          本文标题:记一笔之:antd 的 RangePicker 设置 disab

          本文链接:https://www.haomeiwen.com/subject/tqynrctx.html