antd DatePicker禁用当前日期时间之前的日期时间

进行日期和时间显示是比较常用的，例如在选择请假日期等，不可能选择当前日期之前的日期时间。antd DatePicker的disabledDate、disabledTime属性，很好的解决了这个问题，下面是禁用后的效果：


下面是实现代码：

import moment from 'moment';

function disabledDate(current) {
    return current && current < moment().subtract(1, 'days')
}

function range(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}

function disabledDateTime() {
    let nowHour = new Date().getHours();
    let nowMinutes = new Date().getMinutes();
    return {
        disabledHours: () => range(0, nowHour),
        disabledMinutes: () => range(0, nowMinutes),
        disabledSeconds: () => [0, 60],
    };
}

<DatePicker disabledDate={disabledDate} disabledTime={disabledDateTime} showTime onOk={(value)=>{setStartTime(value)}} />

当然实际业务可能没有这么简单，例如开始时间还不能大于结束时间等。这里只是简单的实现。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！