02.el-date-picker组件只可以选择为了时间，精确到时分秒-Toy模板网

这篇具有很好参考价值的文章主要介绍了02.el-date-picker组件只可以选择为了时间，精确到时分秒。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🍓 作者主页：仙女不下凡－前端萌新

🍓 前言介绍：以下👇 内容都是我个人对于前端知识的总结，会定期更新欢迎持续关注！

🍓 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

下面代码为时间选择器datetime可以精确至时分秒，下面使用handlePickerOptions方法来处理需求

<!-- 当:picker-options绑定的是数据的时候handlePickerOptions('start')不传值'start' -->
<el-date-picker
  v-model="params.startTime"
  :picker-options="handlePickerOptions('start')"
  type="datetime"
  placeholder="开始时间"
  value-format="yyyy-MM-dd HH:mm:ss"
/>
<div mb20 mlr20>至</div>
<el-date-picker
  v-model="params.endTime"
  :disabled="!params.startTime"
  :picker-options="handlePickerOptions('end')"
  type="datetime"
  placeholder="结束时间"
  value-format="yyyy-MM-dd HH:mm:ss"
/>

1.不可选择过去及当天时间（开始时间和结束时间没有做比较）

data() {
  return {
    handlePickerOptions: {
      // 限制预约时间， 24 * 60 * 60 * 1000作用是否可以选择今天
      disabledDate(time) {
        return time.getTime() < Date.now()
      }
    },
  }
}

2.只可以选择未来时间，下面的方法已经提前安装与引入dayjs组件，import dayjs from 'dayjs'文章来源地址https://www.toymoban.com/news/detail-556777.html

  methods: {
    handlePickerOptions(type) {
      const _this = this
      return {
        disabledDate(time) {
          const dateTime = type === 'end' ? new Date(_this.params.startTime) : new Date()
          const startDateTime = dateTime.setDate(dateTime.getDate() - 1)
          const endDateTime = dateTime.setDate(dateTime.getDate() + 30000) // 30000为当前日期之后多少天，为了限制结束时间可选的范围
          return (
            time.getTime() < new Date(startDateTime).getTime() || time.getTime() > new Date(endDateTime).getTime()
          )
        },
        // 限制结束时间必须与开始时间有5分钟间隔
        selectableRange:
          type === 'end' ? dayjs(_this.params.startTime).add(5, 'minute').format('HH:mm:ss') + '- 23:59:00'
            : dayjs().add(1, 'minute').format('HH:mm:ss') + '- 23:59:00'
      }
    },
  }