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 = ''
    },
相关推荐
汪子熙1 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到112 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆6 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er11 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0614 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444017 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆17 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子20 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain927 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人38 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa