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;
}
相关推荐
JIngJaneIL6 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟7 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据8 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉8 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge9 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有9 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
chxii10 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够10 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
苹果醋312 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫12 小时前
Vue初始化脚手架
前端·javascript·vue.js