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

最新推荐文章于 2025-04-17 15:56:24 发布
原创 最新推荐文章于 2025-04-17 15:56:24 发布
· 2.9k 阅读 · 13 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #elementui

本文介绍了如何在ElementPlus的DateTimePicker组件中，通过JavaScript动态计算并禁用用户选择的日期和时间，确保用户只能选择当前时间及以后的日期，包括时分秒的处理和相应的禁用函数实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

日期禁选

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=&#
最低0.47元/天 解锁文章
Date TimePicker 时间选择器精确限制到时分秒，此刻按钮点击失效处理
工作的日常记录和平凡的生活分享
07-02 928
今天在开发的时候遇到一个需求，日期时间选择器组件不能选择已经过去的年月日时分秒。用户只能选择当前时间的时间，如果年月日选择是当天之前的时间，时分秒不做限制，如果年月日选择的是当天时间，就要判断时分秒，只能选择当前时间时分秒之前的时间。此时就会出现第一次点击此刻按钮之后就无法再继续点击了。
【区分vue2和vue3下的element UI DateTimePicker 日期时间选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
06-06 1173
在 Vue 2 中，Element UI 提供了 DateTimePicker 组件用于选择日期和时间。然而，如前所述，Element UI 没有官方支持 Vue 3 的版本。但在 Vue 3 中，你可以使用 Element Plus，它是 Element UI 的 Vue 3 版本，并且也提供了类似的 DateTimePicker 组件。
Element UI的el-date-picker禁用日期、小时、分钟和秒钟的实现
最新发布
m0_72030584的博客
04-17 270
Element Plus 的日期时间范围选择器，需要限制用户不能选择未来的时间，包括日期、小时、分钟和秒
Vue3+Element Puls时间日期选择器禁用问题
weixin_55663065的博客
04-09 1055
要求时间和日期都不可以选择当前时间之后的时间
element-plus DateTimePicker 日期时间选择器禁止选择当日之前的日期
技术前端，忠于热爱 @回忆哆啦没有A梦
05-10 3012
element-plus DateTimePicker 日期时间选择器禁止选择当日之前的日期。在`el-date-picker`使用`disabled-date`：禁止使用当前之前的时间。
ElementPlus el-date-picker日期时间选择器组件禁用此刻之前的时间（精确时分秒）
徐三岁的博客
06-19 2001
这里时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds。由于element plus的DateTime Picker组件只提供了disabled-date属性。使用DateTimePicker 日期时间选择器 的disabled-date。
element-plus日期时间选择器，禁止选择当前时间以后的时间，精确到时分秒
weixin_45693431的博客
01-10 4165
函数返回所有大于当前时间的日期。关键思路：用当前日期的日timeDay与我们刚才算出的两个值的日(timeStartDay和timeEndDay)进行比较，代码中的role代表具体哪个时间选择器。当前时间timeDay超过timeStartDay或者timeEndDay时就直接return不做限制，当timeDay不满足条件时，说明选择的日正好在当前日中，所以就需要限制小时不能超过当前时间的小时数。
element-plus el-date-picker禁用当前时间之前时间（包含时分秒）
weixin_51600020的博客
11-01 1447
element-puls el-date-picker时间选择器禁用
element 时间日期选择器 禁用当前时间之前的 时间与日期
weixin_64534009的博客
03-27 1015
有些需求场景 ，我们不仅要禁用今天之前的日期，同时还要禁用现在之前的时间，比如现在是2022.06.18 下午两点。那么我要禁用2022.06.18之前的日期，以及今天14点之前的时间（此时应该只能选 当前时间 - 23:59:59），但是当你选择2022.06.17以及之后的日期的时候 此时时间就可以随便选了 从 00:00:00 - 23:59:59 都可以。
elementUI时间选择器禁用未来时间
qq_49277509的博客
06-30 2140
又是一个组件库的问题，要想后台写的好，element-ui必须要熟悉啊，这不，今天就遇到问题了 问题描述：项目需求是只允许用户查找过去的历史记录，就意味着不可以选择以后的时间，要求，从今天往后的时间颜色要置成灰色。 <el-date-picker :clearable="false" style="width: 290px" v-model="date" type="datera.
elementui选择器多选时闪_elementUI 时间选择器，时间选择快捷键
weixin_28829903的博客
01-26 1305
elementUI的时间快捷键，使用属性:picker-options="pickerOptions"，由于pickerOptions的定义很长，也在其他地方共用，因此建议提取出来在公用文件定义，再在页面直接引用。1、定义元素style="width: 440px;"v-model="timeQuery"type="datetimerange"popper-class="myDatePickerC...
elementUI日期选择器（DatePicker）根据后台返回的可选结束时间禁用其它时间
sunrisewo的博客
09-17 2064
elementUI中的日期选择器（DatePicker）根据前端传给后台的开始时间，后台返回可选的结束时间，禁用掉其它不可选的时间
element DateTimePicker 日期时间选择器 如何禁用当前之前的时间
liuxi_happy的博客
08-25 2801
【代码】element DateTimePicker 日期时间选择器 如何禁用当前之前的时间。
DateTimePicker之禁用当前日期时间之前的数据以及校验函数
小蓝人的博客
12-06 1697
DateTimePicker之禁用当前日期时间之前的数据以及校验函数
element DateTimePicker不允许选择当前日期时间之前的时间
学习记录
02-17 1310
element DateTimePicker不允许选择当前日期时间之前的时间
vue3项目中 element-plus中el-date-picker禁止选择当前日期之前的日期
lindaboniu的博客
09-14 3602
【代码】vue3项目中 element-plus中el-date-picker禁止选择当前日期之前的日期。
element-plus中el-date-picker日期时间组件，实现禁用当前日期以及小时和分钟
dekuyu blog
03-08 1216
【代码】element-plus中el-date-picker日期时间组件，实现禁用当前日期以及小时和分钟。 满足点击当前日期和时间以前的日期时，可以选择之前日期的任意时间范围
【element-plus】DateTimePicker日期选择器，限制指定日期和时间不可选择
stay hungry, stay foolish
10-30 2854
element-plus日期选择器，在指定日期时间前不可选择。
Element DateTimePicker日期时间选择器详测及实战示例
Element DateTimePicker日期时间选择器是Element UI库中的一个实用组件，它允许用户在前端应用中方便地选择日期和时间。这个组件在日常开发中尤其适合那些需要精确管理时间和日期的应用场景，如日程管理、表单填写等...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值