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;
          }
        }
      }
    },
相关推荐
@大迁世界1 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙2 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump2 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD2 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~2 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro2 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin3 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马3 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610373 小时前
干净的图片批量处理,处理速度飞快
前端
用户1456775610373 小时前
亲测好用!简单实用的图片尺寸调整工具
前端