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 = ''
    },
相关推荐
摸鱼仙人~36 分钟前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客36 分钟前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
前端小咸鱼一条1 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript
沉香亭北1 小时前
vue+vite 全局主题
前端
郑州小张1 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
吹牛逼专业户1 小时前
Vue中快速实现主题切换
vue.js
海底火旺2 小时前
探索扣子:解锁中间技能模块的无限可能
前端·人工智能·coze
BigData-02 小时前
vscode vue debug
ide·vue.js·vscode
Amctwd2 小时前
【HTML】HTML 与 CSS 基础教程
前端·css·html
快乐星球喂2 小时前
使用vant轮播组件swipe
前端