antd 日期选择器禁止选择当前时刻之后的时间

2,545 阅读1分钟

日期选择器禁止选择当前时刻之前的时间

<a-date-picker
     v-model:value="time"
     :disabledDate="disabledDate"
     :disabledTime="disabledDateTime"
     style="width: 200px"
     :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
     value-format="YYYY-MM-DD HH:mm:ss"
     placeholder="请选择时间"
     :allowClear="false"
/>
import moment from 'moment'
const range = (start, end) => {
  const result = []
  for (let i = start; i < end; i++) {
    result.push(i)
  }
  return result
}

// 禁止选择当前时间之前的日期
function disabledDate(current) {
  return current && current > moment().endOf('day')
}

// 禁止选择当时之后的时刻
const disabledDateTime = (dates) => {
  const hours = moment().hours()
  const minutes = moment().minutes()
  const seconds = moment().seconds()
  // 当日只能选择当前时间之后的时间点
  console.log(dates, moment(dates).date(), moment().date())
  if (dates && moment(dates).date() === moment().date()) {
    if (moment(dates).hours() === moment().hours()) {
      return {
        disabledHours: () => range(hours + 1, 23),
        disabledMinutes: () => range(minutes + 1, 59),
        disabledSeconds: () => range(seconds + 1, 59)
      }
    } else {
      return {
        disabledHours: () => range(hours + 1, 23),
        disabledMinutes: () => [],
        disabledSeconds: () => []
      }
    }
  } else {
    return {
      disabledHours: () => [],
      disabledMinutes: () => [],
      disabledSeconds: () => []
    }
  }
}