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;
}
相关推荐
Highcharts.js13 小时前
Highcharts角度仪表(Angular Gauge)完全指南:从速度表到工业监控,一文学会gauge与solidgauge实战开发
javascript·angular.js·开发文档·highcharts·图表开发·实心仪表
css趣多多15 小时前
Vue 响应式无限递归问题总结
前端·javascript·vue.js
014-code16 小时前
Vue3 性能优化实战
前端·vue.js·性能优化
强子感冒了17 小时前
JavaScript 零基础入门笔记:核心概念与语法详解
开发语言·javascript·笔记
css趣多多17 小时前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
哆啦A梦158817 小时前
Vue3魔法手册 作者 张天禹 09_props的使用
前端·vue.js·typescript
哆啦A梦158817 小时前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
一叶星殇17 小时前
Windows 下用 Nginx 部署 Vue + .NET WebApi 全流程实战
vue.js·windows·nginx
阿珊和她的猫18 小时前
深入理解 Vue 3 的 `setup` 函数
前端·vue.js·状态模式
FindYou.18 小时前
基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)
javascript·vue