React + antd +DatePicker组件禁用小于当下时间之前的时间,包括时,分

2023-10-27

一、DatePicker组件的设置。

showTime设置时间只显示时,分,不显示秒

disabledDate函数:设置日期的禁用

disabledTime函数: 设置时间的禁用

<DatePicker
    onChange={e => this.changeTime(e, 'beginTime')}
    placeholder="请选择开始时间"
    showTime={{ format: 'HH:mm' }}
    showToday={false}
    getCalendarContainer={triggerNode => triggerNode.parentNode}
    format={dateFormat}
    value={this.state.beginTime ? moment(this.state.beginTime, dateFormat) : null}
    disabledDate={this.disabledDate}
    disabledTime={this.disabledTime}
 />
//时间禁用,当天之前的日期不可选
    disabledDate = (current) => {
        return current && current < moment().startOf('days');
    }
 range = (start, end) => {
        const result = [];
        for (let i = start; i <= end; i++) {
            result.push(i);
        }
        return result;
    }

//当日只能选择当前时间之后的时间点
    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: () => [],
            }
        }
    }

效果图:

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React + antd +DatePicker组件禁用小于当下时间之前的时间,包括时,分 的相关文章