02.el-date-picker组件只可以选择未来时间，精确到时分秒

仙女不下凡

已于 2023-07-14 11:14:15 修改

阅读量1.7k

点赞数

分类专栏： Element ui组件文章标签： elementui vue.js 前端

于 2023-07-12 16:33:08 首次发布

本文链接：https://blog.csdn.net/weixin_55181759/article/details/131684552

版权

文章介绍了如何在前端实现一个时间选择器，精确到时分秒，并通过handlePickerOptions方法处理禁用过去和当天时间的选择。使用了disabledDate函数限制不可选时间，同时结合dayjs库设置了开始和结束时间的范围以及最小间隔。

摘要由CSDN通过智能技术生成

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

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

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

下面代码为时间选择器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>