el-date-picker时间控制范围为过去时间不可选

javascript 复制代码
<el-date-picker 
    :picker-options="startPickerOptions()" 
    value-format="yyyy-MM-dd HH:mm:ss" 
    v-model="form.applyFixPlan" 
    type="datetime" 
    placeholder="选择日期时间">
</el-date-picker>

在method中定义startPickerOptions()

this.$dayjs是Day.js的封装
Day.js中文网

一天的毫秒数为 24*3600*1000= 86400000 = 8.64*10的7次方 = 8.64e7

获取今日之前的日期- 用于今日(包含今日)日期之后不可选限制

Date.now() - 8.64e7

今日(不含今日)之后日期不可选

Date.now() - 8.64e6

javascript 复制代码
    startPickerOptions () {
      let dateYMD = this.$dayjs(this.form.applyFixPlan).format('YYYY-MM-DD')
      let dateNow = this.$dayjs().format('YYYY-MM-DD')
      let dateHMS = this.$dayjs().format('HH:mm:ss')
      let pickerDate = dateYMD === dateNow
      if (this.form.applyFixPlan != undefined) {
        return {
          //因为在选新日期的时候被禁用的时间没有更新,需要手动给赋值
          selectableRange: pickerDate? dateHMS + ' - 23:59:59' : '00:00:00 - 23:59:59',
          disabledDate: (time) => {
            //过去时间不可选
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      } else {
        // 初始默认 过去时间不可选
        return {
          selectableRange: dateHMS + ' - 23:59:59',
          disabledDate: (time) => {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      }
    },
相关推荐
热爱编程的小曾9 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin20 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox33 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952737 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员