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;
}
相关推荐
林太白几秒前
Zustand状态库(简洁、强大、易用的React状态管理工具)
前端·javascript·react.js
Juchecar4 分钟前
Vue3 模板引用 useTemplateRef 详解
前端·vue.js
YuJie25 分钟前
vue3 无缝滚动
前端·javascript·vue.js
Juchecar25 分钟前
Vue3 表单输入 v-model 指令详解
前端·vue.js
小野鲜35 分钟前
前端打开新的独立标签页面,并且指定标签页的大小,管理新标签页面的打开和关闭(包含源码和使用文档)
前端·javascript
十五_在努力1 小时前
参透 JavaScript —— 解析浅拷贝、深拷贝及手写实现
前端·javascript
王六岁1 小时前
JavaScript值和引用详解:从栈堆内存到面试实战
javascript·面试
DevUI团队1 小时前
MateChat V1.7.0版本发布,前端智能化项目贡献者已经达到90+,智能化卡片特性持续演进,快来体验吧~
前端·vue.js·人工智能
Juchecar1 小时前
Vue3 事件处理 v-on 指令 (@) 详解
前端·vue.js
GISBox2 小时前
GISBox支持WMS协议的技术突破
vue.js·json·gis