vue3 + elementPlus 日期时间选择器禁用未来及过去时间

javascript 复制代码
<el-date-picker
                v-model="form.jyTime"
                type="datetime"
                placeholder="请选择加油时间"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledDate"
            />

一、禁用未来时间

javascript 复制代码
/** 时间禁用 */
function disabledDate(time) {
  // 获取今天的日期和时间
  const today = new Date();
  // 如果选择的日期时间在今天之后,则禁用
  return time.getTime() > today.getTime();
}

即可禁用未来日期、时间选择

二、禁用今天之前(过去)的时间

javascript 复制代码
/** 时间禁用 */
function disabledDate(time) {
  // 获取今天的日期和时间(00:00:00)
  const todayStart = new Date(new Date().toLocaleDateString()).getTime();
  // 如果选择的日期时间在今天之前,则禁用
  return time.getTime() < todayStart;
}
相关推荐
Evan Wang6 分钟前
深度解析GetX依赖注入,从Spring与Vue视角看Flutter架构
vue.js·spring boot·flutter
云中飞鸿8 小时前
函数:委托
javascript
老前端的功夫9 小时前
前端技术选型的理性之道:构建可量化的ROI评估模型
前端·javascript·人工智能·ubuntu·前端框架
汝生淮南吾在北9 小时前
SpringBoot+Vue超市收银管理系统
vue.js·spring boot·后端
狮子座的男孩9 小时前
js函数高级:04、详解执行上下文与执行上下文栈(变量提升与函数提升、执行上下文、执行上下文栈)及相关面试题
前端·javascript·经验分享·变量提升与函数提升·执行上下文·执行上下文栈·相关面试题
p***93039 小时前
SpringBoot + vue 管理系统
vue.js·spring boot·后端
爱学习的程序媛9 小时前
《JavaScript权威指南》核心知识点梳理
开发语言·前端·javascript·ecmascript
乐观主义现代人10 小时前
go 面试
java·前端·javascript
8***v25710 小时前
SpringBoot + vue 管理系统
vue.js·spring boot·后端
2501_9418868610 小时前
多语言微服务架构下的微服务熔断与限流优化实践
javascript