vue3使用elementplus对日期时间选择器的 日期和时分秒进行精确范围控制

针对新版本vue3的例子很少，还有elementplus相对于element ui 删除了一部分的api

一、首先使用DateTimePicker 日期时间选择器中自带的api disablesDate对日期——年月日——进行范围控制

          <el-date-picker
              v-model="value1"
              type="datetimerange"
              :disabled-hours="disabledHours"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              :disablesDate="disablesDate"

          />
          

const disablesDate=(time)=>{
/*  const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
  const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
  return time.getTime() <= _maxTime || time.getTime() > _minTime*/
  const _minTime = 1648636781006 //
  const _maxTime = 1648637497427 //
  // console.log(time)
  // console.log(moment(time.getTime()).format('YYYY-MM-DD HH:mm:ss') )
  return time.getTime() <= _maxTime || time.getTime() > _minTime


}

二、对 时分秒进行范围控制，因为elementplus新版本中去掉了一部分api，使用

      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"

const disabledHours = () => {
  return makeRange(0, 16).concat(makeRange(19, 23))
}

进行控制，但是要注意的是，要根据当前选择的日期，判断当前日期下面的 时分秒范围，放入控制语句进行判断即可