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;
}
相关推荐
MXN_小南学前端44 分钟前
watch详解:与computed 对比以及 Vue2 / Vue3 区别
前端·javascript·vue.js
2601_949814691 小时前
Docker部署Spring Boot + Vue项目
vue.js·spring boot·docker
Mr Xu_2 小时前
从后端数据到前端图表:深入解析 reduce 与 flatMap 的数据整形实战
前端·javascript
喜欢吃鱿鱼3 小时前
DES加解密(附带解决转义问题)-VUE
开发语言·前端·javascript
Lkstar3 小时前
逐步搞懂 Vue 的 patchChildren,把 Diff 算法拆给你看
vue.js
Jenlybein3 小时前
速学 VS Code 插件开发入门,客制化你的开发体验
前端·javascript·visual studio code
ZC跨境爬虫4 小时前
UI前端美化技能提升日志day7:(原生苹方字体全局适配+合规页脚完整像素级落地)
前端·javascript·ui·html·交互
好运的阿财4 小时前
OpenClaw工具拆解之tts+web_search
前端·javascript·python·ai·ai编程·openclaw·openclaw工具
whinc5 小时前
Node.js技术周刊 2026年第17周
前端·javascript
nbsaas-boot5 小时前
100万门店级分货系统架构设计
前端·javascript·vue.js