首页 > 建站教程 > 前端框架 >  antd DatePicker禁用当前日期时间之前的日期时间正文

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)}} />
当然实际业务可能没有这么简单,例如开始时间还不能大于结束时间等。这里只是简单的实现。