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;
          }
        }
      }
    },
相关推荐
给月亮点灯|10 分钟前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺27 分钟前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手30 分钟前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰39 分钟前
html音视频和超链接标签,颜色标签
前端·html·音视频
lxh011342 分钟前
LRU 缓存
开发语言·前端·javascript
yangzhi_emo1 小时前
ES6笔记5
前端·笔记·es6
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...2 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See2 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js