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 = ''
    },
相关推荐
疯狂的沙粒8 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq212 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli14 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i14 分钟前
HTML5 拖放 API
前端·html
PasserbyX30 分钟前
一句话解释JS链式调用
前端·javascript
1024小神31 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano36 分钟前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕41 分钟前
如何将异步操作封装为Promise
前端·javascript
小小小小宇41 分钟前
前端定高和不定高虚拟列表
前端
古夕1 小时前
JS 模块化
前端·javascript