Element Plus 日期时间选择器DateTimePicker禁用当前时间之前的时间（包含时分秒）完美解决

最新推荐文章于 2025-08-09 11:07:21 发布

原创

最新推荐文章于 2025-08-09 11:07:21 发布 · 3.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #elementui

需求：禁止选则当前时间之前的时间；

日期禁选

DateTimePicker 日期时间选择器 | Element Plus
element-plus 禁用日期函数disabled-date里

时分秒的处理

时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds

实现思路

通过选择时间的变化，动态计算时分秒是否禁用，废话不多说，直接上代码

<el-date-picker 
  v-model="dateTime" 
  value-format="YYYY-MM-DD HH:mm:ss"
  @update:modelValue="handleDateChange" 
  type="datetime" 
  :disabledDate="disabledDateFn" 
  :disabled-hours="disabledHours"
  :disabled-minutes="disabledMinutes" 
  :disabled-seconds="disabledSeconds"
  :default-time=