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;
}
相关推荐
智码看视界6 分钟前
老梁聊全栈系列:Vue2与Vue3核心区别及学习路线指南
前端·vue.js·学习
weixin_4577630810 分钟前
展示youtube的视频
前端·javascript·html
云水一下11 分钟前
Vue.js从零到精通系列(六):组合式函数与逻辑复用——打造自己的 Hooks 工具箱
前端·javascript·vue.js
Pearson17 分钟前
特大pdf文件在线预览技术方案
javascript·nginx·pdf
GuWen_yue21 分钟前
吃透二叉树与递归!60分钟掌握树结构核心+解题思路
javascript·算法
去码头整点薯条ing22 分钟前
某红书笔记接口逆向【x-s参数】
javascript·爬虫·python
weixin_li152********32 分钟前
《Angular 中优雅地处理枚举值:Map + *ngIf as 替代多次 *ngIf》
javascript·vue.js·angular.js
chushiyunen40 分钟前
vue插件element ui,element plus,ElMessage消息框,ref,动态绑定语法
vue.js·ui·elementui
放下华子我只抽RuiKe543 分钟前
FastAPI 全栈后端(五):后台任务与消息队列
前端·javascript·react.js·ai·前端框架·fastapi·ai编程
丷丩43 分钟前
MapLibre GL JS第44课:生成并添加缺失图标
前端·javascript·gis·mapblibre gl js