antd DatePicker RangePicker限制时间范围,其中结束时间限制时分秒不可选

3,613 阅读1分钟

需求:选择时间区间,且只能选择当前时刻之前的时间,且时分秒也要做限制。(比如现在是2021-06-21 16:35:30,那就只能选择此刻以前的,尚未发生的时间不可选。)期望图如下

image.png

1、引入moment import moment from 'moment'

2、时间控件里设置日期和时间禁用

 <a-range-picker style="width: calc(100% - 100px);"  :show-time="{ format: 'HH:mm:ss' }"
                            :disabled-date="disabledDate"
                            :disabled-time="disabledDateTime"

                            format="YYYY-MM-DD HH:mm:ss" @ok="onOk" />

3、具体的实现函数:

//设置今天后日期不可用
disabledDate(current) {
        // Can not select days after today and today
        return current && (current >= moment().endOf('day');
      },
//设置时间不可用(注:时分秒不可用联动)
disabledDateTime(dates,partial) {
   //当前时间之前
    let nowHours = moment().hours();//0~23
    let nowMinutes = moment().minutes();//0~59
    let nowSeconds = moment().seconds();//0~59
    if (dates&&moment(dates[1]).date() === moment().date()&&partial=='end') {
          return {
            disabledHours: () => this.range(0,nowHours),
            disabledMinutes: () => ((moment(dates[1]).hour() === moment().hour())?         this.range(0,nowMinutes):[]),
            disabledSeconds: () => ((moment(dates[1]).hour() === moment().hour())&&(moment(dates[1]).minutes() === moment().minutes())?this.range(0,nowSeconds):[]),
          };
        }
 }
range(start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      },