el-date-picker日期选择器动态设置日期

需求:选择开始时间,或者在开始时间已存在的情况下;结束时间下拉日期选择框展示从开始日期展示;而不是当前日期,并且结束时间下拉框日期要禁用开始时间之前的日期。

html 复制代码
          <el-form-item label="开始时间" prop="beginTime">
            <!-- :picker-options="pickerOptions" -->
            <el-date-picker
              v-model="formData.beginTime"
              v-elDateFormat
              editable
              value-format="timestamp"
              type="date"
              placeholder="请选择日期"
              clearable
              style="width: 180px"
              :disabled="formData.stageNature== 'point'"
              @change="changeEndTime"
            />
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              v-elDateFormat
              editable
              value-format="timestamp"
              type="date"
              placeholder="请选择日期"
              clearable
              style="width: 180px"
              :disabled="formData.stageNature == 'point'"
              :picker-options="pickerOptions"
            />
          </el-form-item>
javascript 复制代码
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < this.formData.beginTime
        }
      },

这样写,只能让结束时间下拉框日期,开始日期之前的日期都禁用;但并没有实现从12-13号的日期展示,翻看文档查找,default-value这个属性可以设置显示的时间。

给结束时间添加这个属性: :default-value="defaultDateVal"

监听开始时间的变化,然后给defaultDateVal赋值

javascript 复制代码
  watch: {
    'formData.beginTime': {
      handler(newValue, oldValue) {
    if (newValue.beginTime && newValue.beginTime !== '') {
           if (newValue.beginTime) {
            this.defaultDateVal = newValue.beginTime
          }
        } else {
          this.formData.beginTime = ''
          this.defaultDateVal = ''
        }
      },
      immediate: true,
      deep: true
    }
  },
//在开始时间发生改变时,清空endTime 
    changeEndTime(time) {
      this.formData.endTime = ''
    },
相关推荐
gzzeason1 分钟前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone1088 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
paopaokaka_luck15 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
老坛00126 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00127 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾30 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐34 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价35 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花36 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101336 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端