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;
}
相关推荐
coderyi17 分钟前
LLM Agent 浅析
前端·javascript·人工智能
我叫黑大帅19 分钟前
TypeScript 6.0 弃用选项错误 TS5101 解决方法
javascript·后端·面试
科雷软件测试22 分钟前
使用python+Midscene.js AI驱动打造企业级WEB自动化解决方案
前端·javascript·python
We་ct1 小时前
LeetCode 120. 三角形最小路径和:动态规划详解
前端·javascript·算法·leetcode·typescript·动态规划
|晴 天|2 小时前
Vue 3 + LocalStorage 实现博客游戏化系统:成就墙、每日签到、积分商城
前端·vue.js·游戏
changshuaihua0013 小时前
React 入门
前端·javascript·react.js
掘金安东尼4 小时前
本周前端与 AI 技术情报|前端下一步 #462
前端·javascript·面试
qq_12084093714 小时前
Three.js 工程向:实例化渲染 InstancedMesh 的批量优化
前端·javascript
WebInfra4 小时前
Rspack 2.0 正式发布!
前端·javascript·前端框架
前端那点事5 小时前
Vue响应式原理|从底层实现到面试考点,一文吃透(Vue2+Vue3全解析)
前端·vue.js