脚本宝典收集整理的这篇文章主要介绍了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))
}

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

脚本宝典总结

以上是脚本宝典为你收集整理的vue3使用elementplus对日期时间选择器的 日期和时分秒进行精确范围控制全部内容，希望文章能够帮你解决vue3使用elementplus对日期时间选择器的 日期和时分秒进行精确范围控制所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。