React中antd的DatePicker如何禁用小于当前日期和时间

在使用日期组件的时候，有时候会遇到这样的情况，要求小于当前的日期和时间不能让用户去选中，我们就需要做一些设置。

一、设置DatePicker组件

showTime：时间，目前只能设置到分钟，不能禁用秒
format：显示的格式
disabledDate函数：设置日期的禁用
disabledTime函数： 设置时间的禁用

                 {
                            this.setState({
                                startTime: dateString
                            })
                        }}
                    />

//禁用当天之前的日期
disabledDate = (current) => {
        return current && current < moment().startOf('days');
    }

    disabledTime = (date) => {
        let currentDay = moment().date();   
        let currentHours = moment().hours();
        let currentMinutes = moment().minutes();  
        let settingHours = moment(date).hours();
        let settingDay = moment(date).date();
        if (date && settingDay === currentDay && settingHours === currentHours) {
            return {       
                disabledHours: () => this.range(0, currentHours-1),         //设置为当天这一小时，禁用该小时，该分钟之前的时间
                disabledMinutes: () => this.range(0, currentMinutes-1),
            };
        }else if (date && settingDay === currentDay && settingHours > currentHours) {
            return { 
                disabledHours: () => this.range(0, currentHours-1),      //设置为当天这小时之后，只禁用当天该小时之前的时间 
            };   
        }else if (date && settingDay === currentDay && settingHours < currentHours) {
            return {
                disabledHours: () => this.range(0, currentHours-1),      //若先设置了的小时小于当前的，再设置日期为当天，需要禁止选中
                disabledMinutes: () => this.range(0, 59),
            }
        }else if (date && settingDay > currentDay) {
            return {                                    
                disabledHours: () => [],                     //设置为当天之后的日期
                disabledMinutes: () => [],
            }
        }
    }

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

完成后就会看到如下图的结果

image.png

image.png