element-plus日期时间选择器，禁止选择当前时间以后的时间，精确到时分秒

如图，时间选择器不能选择超过当前时间的选项。

 实现思路

       1.先创建日立组件，代码如下

      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        :disabled-date="disabledDate"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        :default-value="[new Date(), new Date()]"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @calendar-change="calenderSelected"
        @change="getSensorChartData"
      />

2.绑定日期选择事件"@calendar-change=calenderSelected"

        calenderSelected函数会接受一个date参数，具体看element文档。

       这一步是最关键，当我们选中日期后，如图比如选中了1月4日和1月10日，此时calenderSelected函数的date参数会接受我们选中的时间，具体的值date[0]为“1月3日00:00”，date[1]为“1月10日00:00”。

但是，上面日期零点不是我需要的值，我需要选中后的日期加上当前时间的值，比如：现在是13:00，当我选中1月4日和1月10日后，需要的值为"1月4日13:00"和"1月10日13:00",这个值就需要我自己算出来。

1月10日13:00 - 1月10日00:00 = 时间差

1月4日00:00 + 时间差 = 1月4日13:00

1月10日00:00 + 时间差 = 1月10日13:00

算出两个值后保存下来，具体代码如下。

// 保存当前选中的日期
const dateTimeForm = ref({
  startDate: null,
  endDate: null
})

// 日期选中后触发
const calenderSelected = (date) => {
//1.获取当前时间的时间戳
  const now = new Date().getTime()
//2.获取当前日期00:00:00的时间戳
  let todayZero = new Date(new Date(new Date().toLocaleDateString()).getTime())
//3.当前时间距离零点的间隔
  const timeGap = now - todayZero
//4.保存选中开始日期的时间
  const nowStartTime = new Date(new Date(date[0]).getTime() + timeGap)
//5.保存选中结束日期的时间
  const nowEndtIME = new Date(new Date(date[1]).getTime() + timeGap)
  dateTimeForm.value.startDate = nowStartTime
  dateTimeForm.value.endDate = nowEndtIME
}

3.定义限制日期选择的函数disabledDate

        函数返回所有大于当前时间的日期。

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

4.定义限制小时选择的函数disableDate

        关键思路：用当前日期的日timeDay与我们刚才算出的两个值的日(timeStartDay和timeEndDay)进行比较，代码中的role代表具体哪个时间选择器。当timeStartDay或者timeEndDay小于当前时间timeDay时就直接return不做限制，否则不满足条件时，说明选择的日正好在当前日中，所以就需要限制小时不能超过当前时间的小时数。

const disabledHours = (role) => {
  const a = []
  const timeDay = dayjs().startOf('day').valueOf()
  if (role === 'start') {
    const timeStartDay = dayjs(dateTimeForm.value.startDate)
      .startOf('day')
      .valueOf()
    if (timeDay > timeStartDay) {
      return
    } else {
      for (let i = 0; i < 24; i++) {
        if (new Date().getHours() >= i) continue
        a.push(i)
      }
    }
    return a
  } else {
    const timeEndDay = dayjs(dateTimeForm.value.endDate)
      .startOf('day')
      .valueOf()
    if (timeDay > timeEndDay) {
      return
    } else {
      for (let i = 0; i < 24; i++) {
        if (new Date().getHours() >= i) continue
        a.push(i)
      }
    }
    return a
  }
}

限制分钟和秒的思路同上，就不多赘述了