记一笔之:antd 的 RangePicker 设置 disabledDate 实现部分日期可选

之前项目中,遇到一个需求,就是 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 设置 disabledDate 实现部分日期可选)