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))
}

進行控制，但是要注意的是，要根據當前選擇的日期，判斷當前日期下面的 時分秒范圍，放入控制語句進行判斷即可