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;
}
相关推荐
漂流瓶jz1 天前
总结CSS组件化演进之路:命名规范/CSS Modules/CSS in JS/原子化CSS
前端·javascript·css
steven~~~1 天前
为什么mq报错
javascript
threelab1 天前
Three.js 初中数学函数可视化 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
凉辰1 天前
解决 H5 键盘遮挡与页面上推
开发语言·javascript·计算机外设
JoyGqz1 天前
Vue 2 EOL 之后还在跑生产?这个开源安全分支已修主流 CVE,一行依赖即可接入
vue.js
zz5881 天前
面试官问"JS的类型"时,到底想听到什么?
javascript
gjwjuejin1 天前
全埋点技术方案深度剖析:从事件代理到无痕采集的完整实现
javascript
Lkstar1 天前
Vue 3 Composition API 进阶:自定义 Hooks 与 provide/inject 的高级玩法
vue.js·面试
前端若水1 天前
在 Vue 2 与 Vue 3 中使用 markdown-it-vue 渲染 Markdown 和数学公式
前端·javascript·vue.js
之歆1 天前
DAY_10 JavaScript 深度解析:原型链 · 引用类型 · 内置对象 · 数组方法全攻略(下)
开发语言·前端·javascript·ecmascript