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;
}
相关推荐
qq_4061761420 小时前
深入浅出 Pinia:Vue3 时代的状态管理新选择
javascript·vue.js·ecmascript
德育处主任Pro21 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
叫我一声阿雷吧1 天前
JS 入门通关手册(23):JS 异步编程:回调函数与异步本质
javascript·es6·前端面试·回调函数·回调地狱·js异步编程·异步本质
zayzy1 天前
前端八股总结
开发语言·前端·javascript
今天减肥吗1 天前
前端面试题
开发语言·前端·javascript
小J听不清1 天前
CSS 外边距(margin)全解析:取值规则 + 实战用法
前端·javascript·css·html·css3
前端小超超1 天前
Vue计算属性computed:可写与只读的区别
前端·javascript·vue.js
爱学习的程序媛1 天前
【Web前端】Pinia状态管理详解
前端·vue.js·typescript
java1234_小锋1 天前
分享一套优质的SpringBoot+Vue咖啡商城系统
vue.js·spring boot·咖啡商城
小J听不清1 天前
CSS 边框(border)全解析:样式 / 宽度 / 颜色 / 方向取值
前端·javascript·css·html·css3